How do I tile background images in this specific way?

Question

I need some help setting a css button. My intention is having 3 images inside a button forming a background image, lets call pic1, pic2 and pic3. I set pic1 as left and pic3 as right making the borders, I want pic2 to repeat-x filling all remaining space in between, the problem is that pic2 will gladly overwrite pic3.

what I have so far:

button {
    background: url("images/btn_00.jpg") no-repeat scroll 0 0%, 
                url("images/btn_01.jpg") repeat-x scroll center center, 
                url("images/btn_02.jpg") no-repeat scroll right center transparent; 
}

Do what I want is possible? how, please?

Related: [Can I have multiple background images using CSS?](http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css) — Benjamin Crouzier, Dec 15 '11 at 12:55
Create a [JSFiddle](http://jsfiddle.net) that recreates your problem. — My Head Hurts, Dec 15 '11 at 12:59

score 1 · Accepted Answer · answered Dec 15 '11 at 13:03

1

Your styles are using CSS3 -- so be warned (if you did not already know) that this won't work in IE8 or lower.

The answer to your question lies in understanding the Stacking Order of Multiple Backgrounds -- you need to have pic 3 stacked on top of pic 2, which means it should be listed before pic 2. (This is counter-intuitive with respect to how z-index works to determine which elements paint over the others.)

answered Dec 15 '11 at 13:03

Faust

15,130
9
54
111

That did the trick. Thanks for taking the time to properly reading the question, for the on spot anwser and for the reference link. – petervaz Dec 15 '11 at 13:57

score 0 · Answer 2 · answered Dec 15 '11 at 13:09

Short answer: no. One Element can only have one backgroud.

Perhaps you can do it with three elements in a element like:

<div id="mybutton">
  <img src="leftimage.png" />
  <span class="mymiddleElement">MyText in the Button</span>
  <img src="rightimage.png" />
</div>

and set the backgroud of the .mymiddleElement with css

How do I tile background images in this specific way?

2 Answers2

Linked