know of a good CSS-technique for a full-screen background image?

问题

i've look around online and tried various ways to go about this, but haven't managed to find one technique that works for me. i'd like my website's background image to be centered, fill the entire browser screen, and work with responsive design.

is there an easy technique, besides the CSS3/background-size: cover? that just didn't work at ALL for me (not sure why...).

回答1:

If you're not opposed to a solution involving HTML in addition to CSS, you can simulate the background-size: cover behavior with an img tag.

HTML:

<body>
    <div id="image-matte">
        <img src="..."/>
    </div>

    ... Page content below ...

</body>

CSS:

#image-matte {
    position: fixed;
    top: 0%;
    left: -50%;
    width: 200%;
    height: 200%;
}

#image-matte img {
    display: block;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
}

/* Covers the image to prevent pointer interaction */
#image-matte:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

EDIT: To get a vertically AND horizontally centered background image, you'll need to create a table/table-cell relationship between the wrapper div, and an inner div that holds the image itself... The HTML and CSS would look like this:

HTML:

<div id="image-matte">
    <div>
        <img src="..."/>
    </div>
</div>

CSS:

#image-matte {
    position: fixed;
    display: table;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    text-align: center;
}
#image-matte div {
    vertical-align: middle;
    display: table-cell;
}
#image-matte img {
    position: relative;
    text-align: center;
    min-height: 50%;
    min-width: 50%;
}

/* Covers the image to prevent pointer interaction */
#image-matte:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Working example: http://jsfiddle.net/qkpvb/

回答2:

LIVE DEMO

body{
  background:url(img.jpg) center center fixed;
  background-size:cover; // CSS3 *
}

^Note:CSS3. For other old browsers please make it as ugly as possible! ;)

回答3:

To work nice on all browsers, I'd suggest this solution using jQuery :

HTML

<img src='./templates/lights3.jpg' alt="bg" id="bg"/>

CSS

#bg { 
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: -5000; // Yes I always overdo ^^ (that's not very clean)
}

.bgwidth { 
    width: 100%;
}

.bgheight { 
    height: 100%;
}

JQUERY

$(window).load(function() {    
var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();              
function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }           
}                           
theWindow.resize(resizeBg).trigger("resize");
});

This solution would be responsive and resize your background image relative to the size of browser window.

回答4:

Try to add this html tag inside tag or css in the link:

<img src="img/beach.jpg" 

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">

http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg

来源：https://stackoverflow.com/questions/15605349/know-of-a-good-css-technique-for-a-full-screen-background-image

标签

html

css

image

css3

background-image