Background image to be shown on the top of the div

I have an . The zigzag is an image repeated givent its height and width and it’s also transparent
<div class="footer-zigzag"></div>
@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

1 Like

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:after {
	top:-20px;/* height of image */
	height:20px;/* height of image*/
	background:url(img.gif) repeat-x 0 0;

Worked perfectly!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.