With CSS, how do I make an image span the full width of the page as a background image?

css, html

Solution

If you're hoping to use `background-image: url(...);`, I don't think you can. However, if you want to play with layering, you can do something like this:

<img class="bg" src="..." />

And then some CSS:

.bg
{
  width: 100%;
  z-index: 0;
}

You can now layer content above the stretched image by playing with z-indexes and such. One quick note, the image can't be contained in any other elements for the `width: 100%;` to apply to the whole page.

Here's a quick demo if you can't rely on `background-size`: http://jsfiddle.net/bB3Uc/

Problem

Say, like in this example here: http://www.electrictoolbox.com/examples/wide-background-image.html When I do it, I end up getting white borders around the image no matter what I do. What am I doing wrong?

Original source