1

I'm working with a client whose site features photos with a graphical "sketch" border effect like this:

image with sketch border

Normally these borders are simply included in the image file itself, but in this case, that's not going to work.

We're working on creating an image carousel that dynamically pulls in images from Twitter and Instagram, and we want to emulate the border effect. The site is responsive (using Bootstrap 2.3.2), so the border effect will need to scale as the image scales.

My initial thought was to use the border as a background and overlay the image like in this JSFiddle.

HTML: 

<div class="outer">
    <div class="inner">
        <img src="img.png" />
    </div><!-- /inner -->
</div><!-- /outer -->

CSS:

.inner {
    width: 80%;
    height: 80%;
    display: block;
    position: relative;
    padding: 10%;
}

.inner:after {
    background: url(http://i.imgur.com/JdA1v7i.png) no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    content:"";
}

.inner img {
    max-width: 100%;
}

However, they want the border to be exactly flush with the image, and that won't happen using percents, since they don't divide evenly.

Any suggestions on how to go about creating this effect, making it responsive, and keeping the border flush with the inner image?

Joshua Dwire
  • 5,415
  • 5
  • 29
  • 50
Tim
  • 2,843
  • 13
  • 25
  • 3
    Making the border scale would be more difficult. Have you thought about a few preset border sizes that would be displayed based on a few resolution breakpoints? If you're not supporting IE, border images would be helpful: http://www.norabrowndesign.com/css-experiments/border-image-frame.html#two Otherwise, the best solution I could think of would be to create a container div, place your image in it, and then place 4 absolutely positioned divs as overlays on top of it to effect the border you want. – Mister Epic Nov 23 '13 at 15:28
  • Could you make a border that the image could overlap just a bit? If so, you could change the style on `.inner` to `.inner { width: 82%; height: 82%; display: block; position: relative; padding: 9%; }` – Joshua Dwire Nov 23 '13 at 15:51
  • @ChrisHardie - 1. I thought about doing preset border sizes for each breakpoint, but that still doesn't work once the page gets small (for small devices Bootstrap's layout is entirely fluid). 2. We've got to support IE, unfortunately. 3. I like the idea of absolutely positioned divs, but I'm guessing there's no way to get them to scale down as the image scales down. – Tim Nov 23 '13 at 16:12
  • @JoshuaDwire - That's what I'm thinking assuming I can't figure anything else out. It's less than ideal, though, so a "picture frame" border has lines that really look best flush with the image. – Tim Nov 23 '13 at 16:13
  • @ChrisHardie - Your absolute div positioning idea seems to work somewhat better for all elements except the right one, which is still a few pixels off. [JSFiddle](http://jsfiddle.net/z6T4A/4/) – Tim Nov 23 '13 at 16:40
  • Possible duplicate of [CSS scaling a border-image](https://stackoverflow.com/questions/15042949/css-scaling-a-border-image) – Paul Sweatte Jul 11 '17 at 00:28

0 Answers0