问题描述:

The best example of what I need would be the picture behind the search bar on http://shutterstock.com. Try to unzoom (ctrl and - on Chrome) ; the rest of the website will size down; the image itself will remain the same size, it will only be cropped as its height decreases.

Basically, I need the background image to be responsive and full width on an otherwise unresponsive and 960px theme.

It's giving me a bad headache so far; I can't figure out how to do it.

Any ideas?

网友答案:

I think you're looking for background-size. FYI, this doesn't work in IE8 and below I believe.

.your-class {
    background:url('images/yourimage.jpg');
    background-size:cover;
}
网友答案:
body {
background-image: url(blah.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

'cover' will make the background image rescale based on the container's size
'fix' will make the background image positton stay fixed when u scroll down

相关阅读:
Top