Anonymous 0

I can specify CSS like this: background: #CFCFCF url(button.bmp) repeat-x top; - but if I want an image for top along with images for left, right and bottom, how would I go about that?

1 answer

danwellman 5600

You can only have one background image on an element. The top in your example will set the background image to start from the top. You can use different combainations of these words such as top left (begin background image from top left corner), or bottom right (begin background image from bottom right corner), but you can't use top bottom for example.

You can also use pixel measurements too, for example, url(button.bmp) repeat-x top -30px; this would start the background image from the top edge, 30 pixels into the image. This is how CSS sprites are used.

These words are not for specifying different background images. CSS3 will bring multiple background images on an element.

Answered about 10 years ago by danwellman
  • I've found problems cross browser mixing kewords and px based dimensions, so better to do 0 -30px. % based positioning is also interesting - the specified % applies also to the point in the images. Tony Crockford about 10 years ago
  • I've not had this problem, but yeah, I usually use pixel based values anyway. % based values can be a life saver with dynamic content ;) danwellman about 10 years ago