know of a good CSS-technique for a full-screen bac

2019-06-09 12:04发布

站内文章 / HTML/CSS
17 0 0

问题:

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



标签： html css image css3 background-image
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~