Hi there,
Im working through the CSS Missing Manual, and I’m having a slight problem.
I’ve been trying to use the background-position property to position a no-repeat tile at various locations on the page. (see image 1)
The problem is that this code:
body {
background-image: url(images/celtic.gif);
background-repeat: no-repeat;
background-position: center center;
}
is giving me this result (see image 2)
As you can see, the tile is displaying partly off the page and although the horizontal keywords work fine, the vertical portion of the declaration seems to have no affect.
The screen-grab is taken from Dreamweaver’s Live View (webkit engine) but I’ve also tested on FF, Chrome and Safari.
Strangely, when Live View is disabled in DW, it displays correctly.
Any ideas would be gratefully received.
Cheers,
simon
It is because the body has no elements at all and its height is 0. If the body did have a height value, it would center vertically taking as reference the height given.
As Nuria said above you would have to apply a height so that there was enough background to display your image or at least add content so that the body stretches with the content.
You could set a 100% height for html and body but then that would mean that the image would be centred in the viewport and not related to the content.
If you want the image initially in the center of the viewport but to move centrally as content grows then you could give a min-height to html.
html{min-height:100%}
It all depends on what you want to do but the main thing to remember with background images is that an empty element has no background unless it has content or has dimensions set.