CODEWITHSUNDEEP
cssbackgroundbackground-image
Francesca
Francesca

Reputation: 28138

Specifying repeats and positions for background when using multiple backgrounds

I'm trying to apply two background images. One is a repeating block of colour I'd like to have repeating along the x axis. The other is just a single image I'd like to only appear once.

I've used multiple background images to try and get the two images applied to the same div, however I'm not sure how to target specific background rules to each of the backgrounds.

Background 1 needs to have a position of top and repeat-x. Background 2 needs to have a position of top right and no-repeat.

Is this possible with multiple backgrounds or will I have to go back to the old way of two separate divs nested?

JS Fiddle: http://jsfiddle.net/nnq4S/

The grey background should span the entire top of the container whereas the ribbon should stay put.

Upvotes: 4

Views: 101

Answers (1)

nkorth
nkorth

Reputation: 1694

I don't have a test handy, but does this work?

background:url(bg1.png) top left repeat-x, url(bg2.png) top right no-repeat;

Upvotes: 3

Related Questions