Controlling a background image position of the body

Question

Hello,

I was wondering if it's possible to affect the positioning of the body; I have a 500 x 500 pixel image I have positioned in the center of the page, set not to repeat. I was wondering if it's possible to skew the positioning somehow so that it appears 20 pixels down from the center, as I have a larger header that overlays the background.

Any ideas?

Thanks.

Answer 1

Make your background image 40px taller at the top. That will shunt the image down 20px.

You could try hacking around with divs and margins but making the image taller has the same effect without causing hair-loss.

Answer 2

Investigate the use of background-position rule in CSS. It takes 2 values, separated by a space, like so:

background-position: left center;

or

background-position: 50px 100px;

They are in X Y order.

Answer 3

If you are not particular about offsetting exactly 20px you can use a percentage to offset the y coordinate of the background. Here is an example:

background-position:50% 55%;

Here is a link for more info: http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/