Home/ Questions/Q 4615944
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T01:54:44+00:00

Is there a way to assign multiple backgrounds to a single element DIV. The

  • 0

Is there a way to assign multiple backgrounds to a single element DIV.

The idea being to have rounded corners on the top and bottom of a div with a straight background image in the middle.

Two images —

cbmain.png has the corners and cbmains.png is a straight image. They are both transparent and I hope there is a way of managing this in CSS.

Something like ::

background-top:url(example.com/images/cbmain.png) 960px 10px;
background:url(example.com/images/cbmains.png) 960px;
background-bottom:url(example.com/images/cbmain.png) 960px 10px;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Unfortunately multiple-background is a CSS3 thing. I already tested and worked with it on IE9, Firefox, Chrome, Opera, Safari. Your code with the CSS3 syntax would be something like:

    background-image: url(example.com/images/cbmain.png), url(example.com/images/cbmain.png), url(example.com/images/cbmains.png);
background-position: 960px top, 960px bottom, 960px top;
background-repeat: no-repeat, no-repeat, repeat-x;

    Also I suggest you a graceful degradation using Modernizr for those old IE:

    .no-multiplebgs #element { background: url(example.com/images/cbmains.png) 960px; }

    Another approach (that I don’t like) is using any polyfill to force IE6, IE7 and IE8 to work as IE9. Wich can cause problems, memory leaks, etc, etc, etc.

    • 0