CSS Stretched Background Image

Question

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;

score 16 · Accepted Answer · answered Jan 09 '13 at 00:16

16

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.

answered Jan 09 '13 at 00:16

Kelvin

5,227
1
23
36

3

this fixed it: `background-size: 1024px 100%;` – JR Galia Jan 09 '13 at 00:22
Glad to be able to point you in the direction of what you needed :) – Kelvin Jan 09 '13 at 00:25
i couldn't seem to get it working with the `background` tag, but `background-size: cover` seems to work fine. – ddavison Jan 31 '14 at 20:41

score 4 · Answer 2 · answered Jan 09 '13 at 00:22

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;
}

score 0 · Answer 3 · answered Jan 09 '13 at 00:16

0

add this to the css

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

answered Jan 09 '13 at 00:16

Scott Selby

9,420
12
57
96

1

Kelvin's answer is perfect if the image is actually larger then the space you want to put it in and will crop it , setting width and height will stretch the image – Scott Selby Jan 09 '13 at 00:18

score 0 · Answer 4 · answered Jan 09 '13 at 00:17

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>

CSS Stretched Background Image

4 Answers4

Linked

Related