I would like to fix my background to 100% height of body and leave it there even when rest of the page scrolls.
How do I achieve this?
Right now all I have is background:url(bg.png);. The height of the image is 1200px and width 20px, if that matters.
in css, use this:
background-attachment: fixed;
Depending on what you want the background image to do there are a couple of options. There is a great article on ALA about full screen BG images that accounts for scaling:
http://www.alistapart.com/articles/supersize-that-background-please/
If you are just looking to position the image in the browser you would do:
background:url(bg.png) no-repeat top left;
background-attachment:fixed;
Or however you want to position it respectively (top right, etc.)
Some browsers still have trouble supporting the stretching of background images so here's a workaround.
CSS3 Example and Support
Since it's already 1200px, you can use background-attachment:fixed; on the background to make it follow when they scroll. Example at w3schools. You can make the image look like it is meant to flow into a solid color at the bottom with a nice gradient, etc.
Related
My HTML contains several 100% width divs, which have background-image rules applied to them.
Each surrounding canvas div is position relative, while the background-image divs are position absolute.
There is a background-size: cover; applied to each background-image div, but this does not work for some reason.
Please check this page for example:
https://mitteiler-os.de/
The first two "slider" sections with background images applied show white bars to the left and right. These two sections have 1980x1000 px images applied to the background-image CSS, while the rest of the sliders further down have wider images applied to them.
Somehow I do not understand why background-size: cover is not working right here.
Any ideas?
I believe that it does work for me. !?
can't see any white bars on the left or the right.
One Side note, the page doesn't really adapt nice to smaller screens (mobile)
I want to make a background like this except using an image instead of the blue background: http://gakeyclub.org/
Notice that resizing the window of the browser does not disturb the background. What do I need for this?
According to your comment, what you are asking is to have your background center on your page. To do so use background-position this will tell the browser where to position the background according to its container.
background-position:50% 50%;
You might like to add some other background attributes such as background-repeat:no-repeat to make sure the picture does not repeat on huge resolutions.
this is how your css should be looking for a fixed image as background:
body
{
background-image:url('image.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
Why do you want to use an image. It will just increase the size of the page. Use this code:-
background: none repeat scroll 0 0 #002f5f;
I have been using css for a few years but have never ventured past using fixed width layouts. I'm looking at using a fluid layout for my next site, or as much percentage as I can, but I have a question that worries me.
If I have an image with 1900px width set as a background, I understand that it simply shrinks when the browser calls for say 1600px.
What happens when the resolution calls for a 2000px width? I will be left with white space, correct? How can one avoid this? I feel like I should probably just throw out that its not an image that can be repeated horizontally.
A trick usually used is to have the image be "inner-glowed" with a color, then set the background color the same as well.
Suppose your image doesn't tile, and has black "inner-glow" or "feather" effect, then you can make the container's background color as such:
background-color: #000;
background-image: url(your_bgimage.jpg); /* image with black borders due to effect */
background-repeat: no-repeat;
background-position: center center;
So I have a div with a background image. I would like the background image to always be 100% on the screen no matter what the screen size is. I would like the image to grow in proportion but crop the height. I don't want the image to stretch. What I have so far is:
#banner {
background:url(../images/blurry.jpg) no-repeat;
width:100%;
height:520px;
background-size:100% 100%;
}
At the moment this is stretching the image to 100% and making the image look stretched.
Can anyone help me with this or point me in the right direction?
Use the CSS3 background-size property. Set it to cover. Like so:
background-size: cover;
Note that only IE9 and later supports this property value. IE8 will complain about an unsupported value. Chrome and Firefox supported cover since the past couple of years at least.
Is there a way to stop a background image centering at a specific width?
To illustrate the problem, reduce the width of the following site untill scroll bars appear. Then observe how the background image remains centred, however, all other elements hold their place.
See it here
You could add min-width to your #header css
#header { background: #f8f8f8 url("background.jpg") no-repeat center bottom; background-position-y: 160px; min-width:960px;}
Use media queries to set some styles at a specific width and use background-position to stop centering the image. An example: http://3.jsbin.com/ojemur/4/watch (resize your browser window and if the background gets red the image doesn't center vertically)
More information about media queries:
css3 media queries on webdesignerwall
Responsive design with CSS3 media queries on webdesignerwall
A crash course in CSS media queries on nettuts+