CODEWITHSUNDEEP
css
JR Galia
JR Galia

Reputation: 17269

CSS Stretched Background Image

I have a large image to be use as a background-image of a page. What I want is that the height of the image will be stretched to fill the height of the page. It should be centered also.

background: black url("/image/background.jpg") no-repeat fixed center;

Upvotes: 7

Views: 26249

Answers (4)

foundry
foundry

Reputation: 31745

here is a good writeup

http://css-tricks.com/perfect-full-page-background-image/

the gist of it being

body { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Upvotes: 4

Devon Bernard
Devon Bernard

Reputation: 2300

I think using a div would be the easiest way to get the effect you are looking for.

<div id="background">
    <img src="/image/background.jpg" class="stretch" alt="" />
</div>
    <style>
    #background {
        background-color:#000000;
        width: 100%; 
        height: 100%; 
        position: fixed; 
        left: 0px; 
        top: 0px; 
        z-index: -1;
    }

    .stretch {
        width:100%;
        height:100%;
    }
    </style>

Upvotes: 0

Kelvin
Kelvin

Reputation: 5307

background-size: cover will do the trick in modern browsers - see mozilla's documentation for more details.

For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this one to emulate the behaviour.

Upvotes: 16

Scott Selby
Scott Selby

Reputation: 9570

add this to the css

{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}

Upvotes: 0

Related Questions