CSS - strech a background image?

[cmills83]

I am trying to stretch a background image to fit 100% of the page, I can do it when it's not a background image with the code below but how do I set it as a background image of 100%? Thanks. I keep seeing z-index, wtf is that? Thanks.

#background    {margin:0px;width:100%; height:100%; background-image:url("concrete2.jpg"); background-position:center; bgcolor:#000;}
    #background img {width:100%; height:100%;}

first of all # stands for ID.

I am trying to stretch a background image to fit 100% of the page, I can do it when it's not a background image with the code below but how do I set it as a background image of 100%? Thanks. I keep seeing z-index, wtf is that? Thanks.

#background    {margin:0px;width:100%; height:100%; background-image:url("concrete2.jpg"); background-position:center; bgcolor:#000;}
#background img {width:100%; height:100%;}

Unfortunately you are going the wrong way. The way you try to do it is wrong from the beginning.

1. I assume you are trying to set background to a DIV tag with the ID="background". The way you've made your #background definition, your css sets a background image for your DIV element, which cannot be accessed using an img definition in your css.

2. Your #background img definition however does not control the image for your background as well. The way the browser reads your second definition is something like this "Set width and height for any image contained in the object with id="background" to this width and height", however you expect and want to make the browser read it this way: "Set background image for object with ID=background to this width and height".

Unfortunately background image size cannot be controlled by css. These are your only options:

http://w3schools.com/css/css_reference.asp

Check the background section for full description and browser support.

You still can make it work the way you want, however you will end up in very complex absolute positionning on your page, that will make it a complete mess.

Still if you want to try to solve it, you can make 2 div elements. Set Z-index for your #background to be 2, position: absolute, top: 0, left: 0; width: 100%; height: 100%; for your #background img element should be smth like this width: 100%; height; 100%; and for your other div e.g. id="content" set z-index=1; position: absolute; top: 0; left: 0;

The code should be approx like this:

<div id="background" style="z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
     <img src="your_image.jpg" style="height: 100%; width: 100%;" />
</div>
<div id="content" style="z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%;> ENTER YOUR CONTENT HERE </div>

Hope it will work for you.

but the problem with the above approach will be that the background will always remain stationary. It won't scroll down or up.

but the problem with the above approach will be that the background will always remain stationary. It won't scroll down or up.

Well, I would not recommend this aproach at all, as whatever picture you youse it will pixelate because of the stretch, or it will distort as a result of windows stretching. As far as scroll - I have not tried it, however, i think there will be no need to scroll the picture, as it will be always 100% both in width and height. It will look ugly anyway.

Moreover, positioning and readability may turn out to be a problem. The best way in my opinion is to use a nested table inside the content div in order to keep the positioning, but what's the point of css then - it will ruin the whole idea of using styles and reducing nested table usage.

your table bg idea is good i have done that several times. but what i mean to tell u about scroll is that sometimes u really need that. You never know when your requirements change. Also using CSS you will have to change that z-index, every time you update your page maybe major). So table the best option. Another think I had gone out of the topic in my last post, i mean the from the question. Actually I remembered the question partially and didnt revised what was written.

your table bg idea is good i have done that several times. but what i mean to tell u about scroll is that sometimes u really need that. You never know when your requirements change. Also using CSS you will have to change that z-index, every time you update your page maybe major). So table the best option.

http://www.daniweb.com/techtalkforums/post265577.htm - this guy here tries to do the same thing - I hope he tries my way and we can see the result :) . Otherwise I will have to do try it, but I don't have a lot of time. :)

[roryt]

http://www.daniweb.com/techtalkforums/post265577.htm - this guy here tries to do the same thing - I hope he tries my way and we can see the result :) . Otherwise I will have to do try it, but I don't have a lot of time. :)

I made this post and have tried your solution. Unfortunately although you set the height 100% it does not stretch the image to fit the browser windows height in IE and in Firefox it ust sets the image to 100% if it's normal size. And as Vishesh said this will not stop the background from staying static. This is not really a solution in my eyes. In the end I just made sure that my image displays the needed info on a 800*600 screen and a 1280*1024 screen. Oh well you better keep trying. BTW z-index is not a good idea for this because the only way you can set the contents position is by pixel or percentage which means you cannot center it.

[tgreer]

CSS cannot stretch an image: a browser is not an image editing program. CSS can repeat an image, but the image must be designed naturally to tile well.

The typical technique is to divide an image that must "stretch" horizontally into three images, a left, center, and right. The center image will be a solid color and will be set to repeat/tile in the x-dimension. This gives the effect of stretching.

The technique for an image that must expand vertically is to divide it in two, a top that remains static and a bottom that is a solid that is set to repeat/tile in the y-dimension.

I saw what you're trying to do on the other page and I haven't tried my solution. By the way, I agree that the Z-index is not a solution, as it requires absolute positioning, which in my opinion should be avoided, as long as it is not essential for the page layout, as it may to cause extra prblems rather solving them :).

As long as regarding your page, on 1600*1200 your black background is visible approx 40px on both left and right sides. If you want to see how it looks I can snapshot it for you and send it over mail.

[cainy393]

your all wrong there.

body {
background-image:url('concrete2.jpg');
height:100%;
width:100%; }

simple. :)

[lrbabe]

In modern browsers you can now use the CSS3 property background-size

.selector {
  /* will stretch the image so that it covers all of the element */
  background-size: cover; 
  /* will stretch the image so that it fits perfectly inside the element  */
  background-size: contain;
}

This allows to achieve background stretching while preserving the aspect ratio of the background-image: https://developer.mozilla.org/en-US/docs/CSS/background-size

I’ve personally developed a polyfill that implements those properties in IE8: https://github.com/louisremi/background-size-polyfill