How to give left and right padding/margin to repeated background in css3 multiple background?

Jitendra Vyas picture Jitendra Vyas · May 5, 2011 · Viewed 11.2k times · Source

What I want to do is exactly the same like in this article

http://css-tricks.com/css3-multiple-backgrounds-obsoletes-sliding-doors/

But in my case the left and right image is transparent. so repeated background is repeating in whole element. Is there any way to give right and left space?

HTML

<ul>
    <li class="expanding">Went To The Market</li>
</ul>

CSS

li.expanding {
    background: url('left.jpg') top left no-repeat,
        url('right.jpg') top right no-repeat,
        url('middle.jpg') top center repeat-x;
    height: 40px;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 20px;
    float: left;
}

See live example here: http://css-tricks.com/examples/CSS3-Expanding-Menu/

Answer

kbtz picture kbtz · May 6, 2011

Take a look at this:

<html>
<head>
<style type="text/css">
li {
    background: url(http://www.w3schools.com/images/w3css.gif) repeat-x;
    padding:0px 20px;
    outline:1px solid red;
    background-clip:content-box;
}
</style>
</head>
<body>
<ul>
        <li>Went To The Market</li>
</ul>
</body>
</html>

If you don't want use padding, you could also use an left-right border with rgba(0,0,0,0).

To understand how it work, visit: http://www.css3.info/preview/background-origin-and-background-clip/