how to center background image in window resize

Question

I am trying to put in my homepage an image using CSS's background-image and position to change its offset.

problem is, when I resized the browser size, the image will stay static and will not move accordingly

how can that be achieved?

thanks

Answer 1

Use a percentage: background-position: 50% 50% will center the background image.

Answer 2

A few variants to do this:

background: url(../images/bodyBG2.gif) center center no-repeat;

or

background: url(../images/bodyBG2.gif) 50% 50% no-repeat;

or

background-image: url(../images/bodyBG2.gif);
background-repeat: no-repeat;
background-position: 50% 50%;

If you need to position the background vertically to a certain point (150 pixels from the page top, for example), change the code:

background: url(../images/bodyBG2.gif) 50% 150px no-repeat;