I’ve actually been using the “img” element for a while, and it’s a great workaround. You don’t need scripting at all for resizing, so I’m curious what “img” method you’re referring to. Mine usually looks something like this, with the “bg” div coming before your “wrapper” div:
<div id=“bgScaleContainer”>
img.jpg
</div>
Then, my CSS is simply:
img.bgScale
{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index:1000;
}
The image only scales according to the browser width, so it’s always the proper ratio. As said above, no tables or scripting necessary, and no scrolling issues at all.
An example: http://benpaddockdesign.com/
Now, I know on my site the image is a huge file and rather tall, so it has extra scrolling, but that’s a conscious decision. It doesn’t have to be that way if you don’t want it to be.
You know, I have had a fair bit of experience with html and css, but still find it difficult to get the page background and other page elements all working together.
“Martingale Collar”:http://martingale-collar.com
Copy & paste the code below to embed this comment.
thauburger
Is there a reason to apply background-size to the body tag as opposed to the html tag? By my understanding, the html tag is always at least the size of the browser window, whereas the body tag can be smaller than the browser window, depending on explicit sizing / size of internal elements.
If this is the case, is there a reason that we wouldn’t apply the style to the html tag, to ensure full-bleed?
Copy & paste the code below to embed this comment.
PROMES
I enjoied the article very much. It offers a great, futureproof, solution for the background. Often I like to have a fixed background for the container only. Is this also possible and if yes, how can I do this?
48 Reader Comments
Back to the Articleroginator
Oh my god, this is so, so cool! Thank you!
nomi49
It’s not working properly in IE8. The background stretches vertically but it won’t stretch horizontally across the window.
benihana
I’ve actually been using the “img” element for a while, and it’s a great workaround. You don’t need scripting at all for resizing, so I’m curious what “img” method you’re referring to. Mine usually looks something like this, with the “bg” div coming before your “wrapper” div:
<div id=“bgScaleContainer”>
img.jpg
</div>
Then, my CSS is simply:
img.bgScale
{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index:1000;
}
The image only scales according to the browser width, so it’s always the proper ratio. As said above, no tables or scripting necessary, and no scrolling issues at all.
An example: http://benpaddockdesign.com/
Now, I know on my site the image is a huge file and rather tall, so it has extra scrolling, but that’s a conscious decision. It doesn’t have to be that way if you don’t want it to be.
I know this is a late post, but I hope it helps.
GlobuleDesign
For now im using a jquery plugin that dynamically resizes the image for different screen sizes. works pretty well across all browsers.
you can find it at ajaxbender
MarieS
You know, I have had a fair bit of experience with html and css, but still find it difficult to get the page background and other page elements all working together.
“Martingale Collar”:http://martingale-collar.com
Carmela Lee
With regards into resizing those pictures do we really that we have those upgraded resolutions?
Carmela Lee from Porte de garage enroulableÂ
thauburger
Is there a reason to apply background-size to the body tag as opposed to the html tag? By my understanding, the html tag is always at least the size of the browser window, whereas the body tag can be smaller than the browser window, depending on explicit sizing / size of internal elements.
If this is the case, is there a reason that we wouldn’t apply the style to the html tag, to ensure full-bleed?
Thanks!
PROMES
I enjoied the article very much. It offers a great, futureproof, solution for the background. Often I like to have a fixed background for the container only. Is this also possible and if yes, how can I do this?