CODEWITHSUNDEEP
htmlcss
Himberjack
Himberjack

Reputation: 5792

how to center background image in window resize

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

Upvotes: 5

Views: 10819

Answers (2)

Arsen K.
Arsen K.

Reputation: 5660

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;

Upvotes: 3

GolezTrol
GolezTrol

Reputation: 116110

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

Upvotes: 10

Related Questions