Fully Resizeable Background Image Using CSS

**UPDATE** This technique has been COMPLETELY revised thanks to CSS3. Check out http://css-tricks.com/perfect-full-page-background-image/ for details.

In this screencast I'll show you how to create a fully resizeable and scalable background image for your website using only one line of CSS. I've been looking for a good reason to use Screencast-O-Matic... so here we go!

Category:

Howto & Style

Tags:

• css
• html
• scalable
• background
• image
• web design
• graphics
• coding
• Screencast-O-Matic.com

[OkamiWolf1200]

WHY IS YOUR VIDEO IN MY CHANNEL??!!

[willsloanonline]

@OkamiWolf1200 Ummm, maybe you marked it as a favorite... because it's awesome. Whatever the case, your channel is out of my hands. It's going to be something you did. Again, because it's awesome.

[WCSally]

Struggling mightily with Dreamweaver .. only good for 5 more months as it was a student copy purchase ... Know of any other really good Dreamweaver tuts on the web? ... TIA

[willsloanonline]

@WCSally I use lynda.com for tutorials. There is a monthly subscription cost but it's totally worth it. They specialize in Adobe products and I think you can even do a trial to see if it's up your alley. Highly recommended.

[BloodyEddy09]

thanks for your nice tutorial it helped me a lot for my university stuff

[willsloanonline]

@BloodyEddy09 Glad it helped. Thanks!

[serious4321]

Simple & Brief.. i was stuck at one place, later found out the solutin, so thought i would share it hre.. if any1 is having problem like BACKGROUND IMAGE IS HIDING THE PAGE, add "Z-INDEX: -1" in #bg-image of CSS sheet.. it'll help background go in back of all other elements.. Hope this helps..

[sfboles]

I've been all over the internet looking at tutorials and have tried them all including this one... to no avail. I can get the image working, but it's like te z-index isn't working. I have the background div set to z-index:-1 and it's still on top of my elements. I'm using Visual Studio 2010. and there is form tag, but the BG div is first after body tag. any thoughts... trying in IE8 btw.

[25intel25]

gracias muy buen video me sirvio d mucho! (y) =)

[SteveDronez]

@TheSterlingTV Yeah, I figured it out. Add the property value z-index:-1; in the background styling in the css document. It will make the background the lowest layer.

[TheSterlingTV]

@SteveDronez got this problem too, did you manage to resolve?

[SteveDronez]

Great tutorial! Works great, except for one issue I'm having. The background seems to be on top of all my other web content. Kind of like layers in Photoshop. I can't see my header, nav bar, content area and so on, but it is there. Any idea on how to get the background image to sit behind everything on my site> Thanks.

[BrokenTvMedia]

How come, when I scale, the image stays in proportion? I want to make it, so that it scales without keepin it in proportion just like yours!