Home/ Questions/Q 6932357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:41:44+00:00

I need some help setting a css button. My intention is having 3 images

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.)

    • 0