Positioning a background image with CSS

Question

Hi,

Is there a way to precisely position a background image with CSS? Code:

.content h2.productSpotlight {background:url(/images/spotlight.jpg) no-repeat; padding-left: 35px;}

I want to be able to move the image around so its more flush with the H2

Thanks

Answer 1

Yes, you can give an offset position for the background property, for example:

background: url(/images/spotlight.jpg) no-repeat 10px 5px;

This will shift the background image 10px from the left corner and 5px from the top. You can also use negative values to shift in the opposite direction.

Answer 2

sure, the background properties include background-position. You can specify it separately as

background-position:20px 20px;

or as part of the combined syntax like

background:url(/images/spotlight.jpg) no-repeat 20px 20px;

See the reference at MDC.