Centering backgrounds (body & div)

HTML & CSS
1

I’ve never had an application where this was necessary, but it would be the best bet for what I’m gonna do. I’ve never centered a background image, so I’m sure it might be as easy as backgroung-image: center; or something. Basically, I want a background image that is centered and does not repeat, aligned to the top of the site (body). I also want another background image to be aligned to the center, but repeat vertically as long as the div is (div). Can anyone throw me an idea of how this is done? Thanks

2

Hi,

You can centre an image on the body background using the background-position property.

e.g.

body {background:url(image.gif) no-repeat 50% 0;/* horizontally centred at the top /}
or
background:url(image.gif) no-repeat 50% 50%;/ horizontally and vertically centred */

If you want an image repeated in a div then just apply it as normal and it will repeat for the height of the element as required.

background:url(image.gif) repeat 0 0;

If you actually want that element centred then the easiest way is to give it a height and width and use this method.

3

Okay I had it stated backwards. Anyway, the background that doesn’t move is working without any problems. My repeating bg actually needed to be on the body layer. It seems to be centered, though it also seems to have the image repeating to the left and right of it as well.


body {
margin: 0px;
padding: 0px;
background: #000000 url(../images/repeatbg.jpg) repeat 50% 0;
}

http://berryequipment.net/orsca/

Any ideas?

edit: SOLVED - repeat-y did the trick.
Thanks for the help

4

Use repeat-y if you want it vertical.

Edit:

our posts must have crossed or I had the window open too long :slight_smile: