CODEWITHSUNDEEP
htmlcssbackground-image
lejahmie
lejahmie

Reputation: 18253

Background image centered and 100% in all browsers

What is the best practice to set a background image centered and 100% (so that it fills the screen, but still retains the aspect ratio) in all browsers?

Upvotes: 8

Views: 78508

Answers (6)

user4311599
user4311599

Reputation:

Picking up an old post, since there is a new method to do it with good browser support.

Use background-image like this:

background-size:cover;
background-position:center;

This will not destroy the proportions of the image but scale it as best as possible never showing any black bars (or what ever would be in the background).

Browser support is almost perfect as you can see on Can I use it?. Opera Mini could be an issue, but the browser will probably be replaced by Vivaldi soon.

In conclusion I think that this is definetly the way to go, since it´s by far the cleanest and most reliable solution and very easy to edit with JS aswell.

Upvotes: 4

lejahmie
lejahmie

Reputation: 18253

Best solution I have managed to make so far is as follows;

//CSS
<style type="text/css">
   body {
       margin:0; padding:0;
   }
   html, body, #bg {
       height:100%;
       width:100%;
   }
   #bg {
       position:absolute; 
       left:0;
       right:0;
       bottom:0;
       top:0;
       overflow:hidden;
       z-index:0;
   }
   #bg img {
       width:100%;
       min-width:100%;
       min-height:100%;
   }
   #content {
       z-index:1;
   }
</style>

//HTML
<body>
<div id="bg">
   <img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
   //Rest of content
</div>
</body>

Might this be best way? Anyone see any problems with doing it this way?

Thanks for your time!

Upvotes: 9

Joel Crawford-Smith
Joel Crawford-Smith

Reputation: 494

This is an excellent post on two methods to achieve this look:

http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

The best practice is to not to do what you want to do.

By specifying 100% you are going to stretch (thus distort) the image.

The best way to have a simple, centered background is like this:

body {
    background-image:url(Images/MyBG.png);
    background-position:center top;
    background-repeat:no-repeat
}

EDIT:

Now you CAN target different resolutions and use a different background image, depending on the size by specifying a resolution-dependent stylesheet. You can use separate stylesheets just to define the one background element with different files in each.

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

See: http://css-tricks.com/resolution-specific-stylesheets/

or the W3C CSS media query spec.

Upvotes: 8

Davor Lucic
Davor Lucic

Reputation: 29400

You could use CSS3 background-size property, but i am not sure how well it is supported. I think most of them do but with prefix:

-o-background-size
-webkit-background-size 
-khtml-background-size

Upvotes: 0

Kasturi
Kasturi

Reputation: 3333

I do not know how to achieve this by setting it as a background image. However you could have a image that is absolutely positioned

<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>

Upvotes: 0

Related Questions