Reputation: 21
I have a very large image. I want to use this image as the background of my website. I would also like for this image to stretch and fit different browser window sizes.
This is the solution I have come up with. (I put it on jFiddle to make it easier for you guys to read).
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;}
<body>
<div id="background">
<img src="background/001.JPG" class="bg"/>
</div>
</body>
Is there anyway for me to do this without using IMG tag in my HTML? It interferes with the rest of my layout.
Upvotes: 0
Views: 7460
Reputation: 8248
This should work in IE9/10 and current Firefox, Opera and Chrome:
html{
background: url(background/001.JPG) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG', sizingMethod='scale');
}
Upvotes: 1
Reputation: 208040
Make it a background image (see example below) instead of an image with a huge negative z-index, and consider using the CSS3 backgound-size property for covering the entire page.
background-image: url(background/001.JPG)
Upvotes: 1