CODEWITHSUNDEEP
cssimagehtmlbackground
John Doe
John Doe

Reputation: 21

HTML/CSS Div and Background Image

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).

http://jsfiddle.net/sGyax/

.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

Answers (2)

Offbeatmammal
Offbeatmammal

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

j08691
j08691

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

Related Questions