开发者

css perfect full screen image background

I'm wondering which is the best solution for an background image to fit every screen, every browser. Al开发者_运维百科so I've noticed that the majority of techniques crop the image a little bit. I know there are a lot of techniques to do this but I want to know which is the best in your opinion. Thanks!


This post from CSS-tricks.com covers different techniques for full screen background images and includes a fall-back for old versions of IE (I haven't tested the IE fix).

When I don't need to worry about supporting old browsers, I generally use the CSS3 method:

html { 
    background: url(http://lorempixum.com/1440/900/sports)
        no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


Add this inside the body tag:

<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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜