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?
A:
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>
Kasturi
2010-05-10 14:43:22
What's the `display: table;` for?
ANeves
2010-05-10 14:45:34
for the vertical-align to work. it can also be display:table-cell
Kasturi
2010-05-10 15:11:42
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
2010-05-10 15:29:45
I am pretty sure IE will fail :)
Kasturi
2010-05-10 15:48:40
also... when ur display is inline, ur height and weight style attributes will fail.
Kasturi
2010-05-10 16:09:56
A:
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
rebus
2010-05-10 14:47:42
+1
A:
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.
Diodeus
2010-05-10 14:50:52
Problem with this solution is that I need to make many, many images with different resolution.
jamietelin
2010-05-12 15:14:19
+1
A:
This is an excellent post on two methods to achieve this look:
Joel Crawford-Smith
2010-05-10 15:04:53
I did a modified version of Technique #2, works kind of okey, check my own answer to the question.
jamietelin
2010-05-12 15:22:55
+1
A:
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!
jamietelin
2010-05-12 15:10:16