开发者

css perfect full screen image background

开发者 https://www.devze.com 2023-03-31 20:23 出处:网络
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'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

精彩评论

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

关注公众号