100% CSS scaling background image

Ahh, that old chestnut! I too have searched around in the past to find a solution for this. There are many solutions such as the use of JavaScript, but I dont want to use that to keep page loads down.

I have found the easiest way of doing this, and you will also see that I am using it on this site. Below is the pasted code to make it work. For those less experienced in CSS the overflow property will allow the background image to “run off” without causing scroll bars, however make sure you use container divs as well to prevent your content running off!

For the Stylesheet, use these lines of code:

body {
overflow: hidden;
}


.bg-image {
width:100%;
position: absolute;
top: 0;
left: 0;
}

For the body of the HTML simply format like this:

From here code on as usual! Also it is worth noting that giving it a negative z-index value in the css will help any problems you encounter.

  • http://www.mcculloughdesigns.com/blog Joseph McCullough

    Thanks for the tip! It’s a bit silly how this effect has to be created with such a round-about method. CSS isn’t the best language, but it’s all we have to work with!

    • admin

      I know. There is a way with Javascript to force it, but its quicker this way. You can also use 100% on width and height but it will lose the aspect ratio.