Background image to be shown on the top of the div

[zavenlepedjian8]

I have an . The zigzag is an image repeated givent its height and width and it’s also transparent
html:
<div class="footer-zigzag"></div>
css:
@include retina("/content/brand/0/images/footer-zigzag.png", 3, 18px 10px, left top repeat-x #fff);
This is achieved by an extra div as it is shown in the code.
How can I have the same result as in the image without adding this extra div

[PaulOB]

Why can’t the image be on the background to the div that it refers?

If perhaps you have a solid color and you want the image above the divs background then you can use the after element to create a spare ‘box’ that you can use.

Set position:relative on the div in question and the do something like:

.divName{position:relative;}
.divName:after {
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:-20px;/* height of image */
	height:20px;/* height of image*/
	background:url(img.gif) repeat-x 0 0;
}

[zavenlepedjian8]

Worked perfectly!