I am trying to make a company logo always stay in the top left hand corner of the screen no matter what size the screen is. I do not want to use the fixed element positions as i dont want the image to scroll with the screen. My background already stretches automatically to size of the screen and therefore depending on the size of the screen the logo moves. Please let me know ideally using CSS
Simply use position: absolute; in your Logo styles
And style it with Left, Right, Top, Bottom Properties.
You can read more about position: absolute; in W3Schools : Link
Related
I want to place a full width image (somethink like a header or slider) but I want to show only the center of the image, UNLESS the viewport would be so big than the image had to be enlarged.
Some detailed examples:
My image is 2000x200px
In a screen of 1600px width I want to show the central 1600px of my image, no resize.
In a screen of 450px I want to show the central 1600px of my image, but shrink (resized-down)
In a screen of 1900px I want to show the central 1900px of my image, no resize.
In a screen of 2500px I want to show the full width 2000px of my image, of course, enlarged.
What I have so far:
Make a responsive image is quite easy
#header-img {
width: 100%;
height: auto;
}
But it always shows the full image. There are a left and a right chunk I don't want to show unless the resolution of the client screen would be really big.
On the other hand, get the "overflow" behaviour could be done setting the image as background of a div, and setting his background-size property to cover, but it's not responsive.
<div style="background-image: url(header.jpg); background-size: cover; background-position: center; height: 200px" />
I need the two behaviours. Perhaps I need media-queries, but I'm trying to avoid it. I don't want any javascript code neither, only CSS.
I have seen this behaviour in some pages, but I can't find any at the moment.
EDIT: A picture speaks a thousand words
http://tomascrespo.sofiytommy.com/wp-content/uploads/2015/08/pregunta.jpg
Observe that numbers 7 and 8 are only showed in ultra wide screen
I've got a Bootstrap page where some rows have background images. Is there a way (preferably css) to scale such a background image, so that it's always centered and fills the div 100%?
So I don't mean a fullscreen background image for the entire page (like this), it just needs to fill the div (typically a row in my bootstrap container).
I mean like so:
So no matter the display resolution and the actual screen size of the div, its background image should scale accordingly so it entirely fills the div. The image should not be stretched out of proportions, which means that part of the image will typically fall outside the div, either up/down or left/right (unless the div just so happens to have the exact same aspect ratio as the image).
Also the image should be centered, i.e. the middle of the background image should be in the middle of the div.
I've tried all sorts of things with background-size:100% auto or auto 100% which seems to work OK in one direction, but I can't seem to find a generic solution that works in all cases.
sure, you could apply the same idea to any element:
yourdiv {
background: url(images/bg.jpg) no-repeat center center fixed;
/* and one of these: */
background-size:contain;
background-size:cover;
}
I have a large background image that I want to use in a hero element in a site banner.
The bottom of this photo is the crucial part, so I always want it showing. background-position will align a smaller photo to the bottom of a larger element, but when the background photo is larger than the element, it keeps the top of the background-image aligned with the top of the container. I want to keep the bottom of the background-image aligned with the bottom of the container.
An example: here's a background image; I want to make sure the bottom (some mountains) always show up in this jsfiddle.
Remove background-attachment: fixed; from your hero class.
I have a background image that's centered vertically and horizontally using CSS. It looks great and is working as long as the window is large enough to display the background image.
The problem I have occurs when the window is resized to be smaller than the bg image. When this happens, the bg image continues to be centered, but I instead need to maintain a minimum margin around the top and left of the bg image. The BG image is 900px x 700px, and the code I've used is:
#main_wrapper {
background-image: url(../images/background.jpg);
position:relative;
width:900px;
height:700px;
left:50%;
top:50%;
margin-left:-450px;
margin-top:-350px;
}
Any solution would need to continue to center the bg image horizontally and vertically when the window is large enough to allow it, but would have a minimum margin at the top when the window is shorter than the bg image, and a minimum margin at the left when the window is narrower than the bg image. Any help would be greatly appreciated. Thanks.
If this is in your <body>, I'd add two extra divs right at the beginning of the body, positioned absolute, and having a background-color of white, to make sure that in that area, the background image isn't seen.
Then wrap the rest of what you had in the body in a <div> and have it be position: relative.
I think this should result in what you want.
Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.