A little dab'll do ya
Code Snippets
CSS background-image Technique:
html {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}
CSS + Inline Image Technique:
img {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
Table technique:
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="logo.png" alt="" /></td>
</tr>
</table>
</body>
</html>
It’s also possible to do it using div’s and CSS without using px sizes or tables:
It’s explained here, but in spanish :(
explination using google page translator.
This is called “The dead center”, or am I wrong?
It’s explained in English here:
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
This was exactly what I needed, thank you.
Why does everyone in the universe write background shorthand wrong?
This is the correct way and the only way that works in ALL browsers that support background shorthand:
background: #FFF url() repeat fixed left top;
/rant
thanks, i agree with you, WHY
Craig, syntactically, you can have your properties in any arrangement:
background: #fff url() fixed left top;
is essentially the same as
background: url() fixed 0 0 #fff;
either way you look at it, it’s doing the same exact thing.
Thanks. This helped me a lot.
Brillant!!
Hi,
Thanks a lot frnd! :)
I was searching for the same thing from a long time and now I got the one…
Thanks all for the trick.. I was searching for that for some time..