How to give left and right padding/margin to repeated background in css3 multiple background?
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
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/