How do I center a background image to its parent element?

Question

How do I use the CSS background-position property to center a background image to its parent element? I can only get the background image to center to the entire page.

Answer 1

background-position: center;
background-repeat: no-repeat;

works for me. centers horiz and vertically

Answer 2

Keep in mind that block-level elements which are not re-sized in some way (using height/width or float or margins) will always take up the width of the window, even if the content of the element does not. This means that centering the background to the element will center it to the window as well.

To check if that's the issue, I usually add

border: 1px dashed #f00;

to the element.

If the element is re-sized, Scott's answer should work.