Search code examples
htmlcssbackgroundphotoshopstyling

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?

Thanks!

Screengrab:

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

Solution

  • 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 CanIUse.com 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.