Hi,
Does anyone know how to make a background image scale to 100% of the browser width? See this example for a visual reference of what I’m asking. In the example, how would you make the beach picture scale to 100% of the window so you’d never see it’s side edges as you make the browser window larger and smaller?
Thanks for any help!
I don’t think there is anyway to get rid of that tad bit of space but by specifying where it goes I sort of got it.
*{margin:0;padding:0;}
body {
background: #040e15 url(iStock_000006887478Small.jpg) center center no-repeat;
width: 100%;
}
I shortened your code.
Thanks RyanReese,
I’d like to actually stretch the background image in width.
I know but I’m saying I don’t think that it is possible: I tried to stretch it across the entire screen so the black didn’t appear but I found repositioning it shortened the black space so it is less subtle.
I’d like to make the background stretch like this… http://www.palm.com/us/. It appears to be done with CSS.
A background image cannot be stretched. In the linked site, the image is an actual <img> tag in the html, and this can be set to 100% width in the css. Such resizing by the browser will lead to a reduction in image quality, so this is better suited to lower resolution images.
Hi Centauri,
Your saying it’s not done with CSS on the Palm site?
The size of the image is defined in the css but the image itself is an <img> tag in the html.
Good God! Who ever wrote that website needs to go back to school!
Unfortunately there aren’t that many schools who teach modern front end web development, most of the teachers are out of touch.
Hey Centauri,
How do they do it in CSS?
Any one know how I could apply that technique to the beach image in the example web page?
On the Palm site, they use two overlapping images in the html :
<img id="bg-focus" class="bg-focus" src="/us/assets/images/products/index/pre/bg-focus-pre-sm.jpg" />
<img id="bg-blur" src="/us/assets/images/products/index/pre/bg-blur-pre.jpg" />
of 1280 x 800px size. These are absolutely positioned and set to 100% width in the css :
#bg-focus{position:absolute;left:0;top:0;width:100%;opacity:1.0;filter:alpha(opacity=100);z-index:0;}
#bg-blur{width:100%;height:800px;position:absolute;top:0;left:0;z-index:0;opacity:0;filter:alpha(opacity=0);background-color:transparent;}
I think the opacity of the blurred image is changed via javascript after the content loads.
To apply a similar resizing technique to your example site, the background image would be moved to the html before any other content, and positioned absolutely behind the content in the css :
<div id="background"><img src="iStock_000006887478Small.jpg"></div>
<div id="wrapper"><img src="harbor_restaurant01.png" height="278" width="827"></div>
body {
margin: 0;
background-color: #040E15;
}
#background {
position: absolute;
width: 100%;
}
#background img {
width: 100%
}
#wrapper {
width: 827px;
padding-top: 80px;
margin: 0 auto;
position: relative;
}
Ah, I see how it works now.
Thanks, Centauri, I appreciate it.
praxis, can you show us the update when you’re done?
Can I take this thread as absolute confirmation that there is no way to stretch background images?
I once wanted a background image to “stretch” with the browser, but a logo and text image to “sit on top” and not stretch out of proportion. How would I code that?
Many thanks. This site rocks and I love the podcast… it’s fairly clear even to a newbie like me.
With the image in the html as I outlined above, just setting the width only in percent will maintain the aspect ratio of the image - if you set both width and height, then you can stretch it out of proportion.
Here’s the mockup I’m showing to the client. Works pretty cool I think. 
Nice! Now I see what you were after. So you can show clients a mock-up without the header navbar functional yet? Cool… I’ll have to remember that. It would save time to just show them the home page and at least get a visual cue for what they are after.
When CSS3 is implemented by all the browsers you will be able to use…
background-size: 100% 100%;
however as this has not been implemented, the only way you can achieve a explicitly sized image in the background is using the above method, by using z-index and absolute positioning, you can simply layer your design over the img tag and achieve the same effect… it means that a part of the style is unfortunately placed into the mark-up, but it’s the only way it can be achieved currently.
I first saw this technique on the below website… and I really am excited about when browsers can natively support it! 
If it’s CSS3 you can expect a long time to happen before at least 90% of the market share browsers support it.