CODEWITHSUNDEEP
cssimagefullscreen
alexandru
alexandru

Reputation: 167

css perfect full screen image background

I'm wondering which is the best solution for an background image to fit every screen, every browser. Also 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!

Upvotes: 11

Views: 25083

Answers (2)

Tony Wu
Tony Wu

Reputation: 1107

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

Upvotes: 0

DuMaurier
DuMaurier

Reputation: 1211

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;
}

Upvotes: 23

Related Questions