Background image centered and 100% in all browsers

Question

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?

What's "all browsers"? Does it include IE6? (For your own good, it better not.) — ANeves, May 10 '10 at 14:46
No, but all browsers up to date :) So, IE8, Firefox 3, Safari 4 and so on... and by all I mean all major browsers not Camino, Miro and so on. — lejahmie, May 12 '10 at 14:58

score 9 · Answer 1 · answered May 12 '10 at 15:10

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!

Diodeus - James MacFarlane · Answer 2 · 2010-05-10T14:58:34.600

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.

Problem with this solution is that I need to make many, many images with different resolution. — lejahmie, May 12 '10 at 15:14

score 4 · Accepted Answer · answered Apr 08 '16 at 12:00

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.

Thank you for updating an old thread. This is the way I do it today as well. — lejahmie, Apr 12 '16 at 07:31

score 2 · Answer 4 · answered May 10 '10 at 15:04

2

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

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

answered May 10 '10 at 15:04

Joel Crawford-Smith

494
5
14

I did a modified version of Technique #2, works kind of okey, check my own answer to the question. – lejahmie May 12 '10 at 15:22

score 0 · Answer 5 · answered May 10 '10 at 14:43

0

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>

answered May 10 '10 at 14:43

Kasturi

3,335
3
28
42

1

What's the `display: table;` for? – ANeves May 10 '10 at 14:45
for the vertical-align to work. it can also be display:table-cell – Kasturi May 10 '10 at 15:11
I don't think you need it for vertical-align to work, vertical-align is supposed to work on any inline-element: http://www.htmldog.com/reference/cssproperties/vertical-align/ – ANeves May 10 '10 at 15:29
I am pretty sure IE will fail :) – Kasturi May 10 '10 at 15:48
also... when ur display is inline, ur height and weight style attributes will fail. – Kasturi May 10 '10 at 16:09

score 0 · Answer 6 · answered May 10 '10 at 14:47

0

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

answered May 10 '10 at 14:47

Davor Lucic

28,970
8
66
76

Background image centered and 100% in all browsers

6 Answers6