Ripped edge pattern on div?


The designer I’m working with has given me a monster of an implementation issue…

Page background is grey, and atop of it is a crumpled paper texture (non-repeating with painted design elements) for the first 600 pixels (by 1400 pixels across; currently centered as a non-repeating background). At the bottom is another div with more text on it — with a dropshadow, complex line pattern for the background and ripped edges, hovered slightly above the top div.

  • Saving the top part as a JPG and the bottom part as a transparent PNG leads to filesizes of +1mb.
  • Saving the top part as a JPG and the bottom part as a JPG doesn’t work very well due to the drop shadow. It would technically work to save the bottom part as a slice with elements of the top part underneath the dropshadow, but it would have to line up pixel-perfect always or else look crappy. And at that point, I might as well save the whole site as one big image…
  • If the bottom part had a solid colour for the background, I could set each edge to have a different transparent PNG. However, the line pattern on the bottom part means that this wouldn’t work.

My question is ultimately:

How the heck do people do ripped edges these days without making their site one big image?



screengrab -- note how the bottom bit overlaps the top texture...


CSS3 does provide a border-image property, which should be able to help you with the ripped border effect (although even then, it would help if it was a repeating image).

See here for the W3 specification.

However it may not be much use to you, because browser support for this feature isn’t great — IE doesn’t support it at all (not even IE9), and while most other browsers do support it, they all currently have gaps in their support and require a vendor prefix in the CSS property.

See for a full browser support table for it.

To be honest, I think you should just go back to your designer and ask him to make it easier to work with — he’s probably just created something he thinks looks good, but is unaware of the limitations of the design he’s put together; if you explain the issue to him, he may well be able to produce something a bit more usable for you.

Answered By – Spudley

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published