Using images for borders or backgrounds to surround an element?

I am redesigning a site using a responsive grid (http://www.responsivegridsystem.com/) and I am trying to keep some of the qualities of the original design, which play around with elements of medieval manuscripts and parchment. One idea I had was to give the header and footer an edge (all around each of them) that has a torn paper/ragged edge look, with a slight dropshadow to make it look as if those are pieces of paper laid on top of the rest of the page.

But, before I start working on accomplishing the graphical elements, is this even possible to place on the page using background and/or border elements that are modern and compatible with a responsive design?

To illustrate, this is the page I am working on ā€“ http://www.westeros.org/Test/ ā€“ and where I now have the dotted border around header & footer is where Iā€™d want this ragged edge.

It is quite possible to use images in borders.

With image borders all around, in a responsive design, there may be issues with ā€˜seamsā€™ on the corners. That could be dealt with by scaling the images with the container, though many elements will alter aspect when re-sized which may distort the image.
Or the edges could be a repeating image, with separate corner images overlaid.
The best working method will depend on the nature of the images and the containers.

Ah, thank you, that looks quite promising. I think the idea of repeating edges and corner overlays sounds like a potentially good idea for the look I am thinking of trying to achieve. Though,how would I place the corner images accurately in a responsive design? I am just starting to wrap my head around not working with absolute positions.

Iā€™m not sure, I have not tried yet, but I was thinking of maybe ::before and ::after pseudo elements with background images.

This is an example border I found on-line. With this type of design the horizontal and vertical edges could be cropped to tile, then the corners could be overlaid to cover the corner seams.

Thanks, will play around with that. :slight_smile:

It seems it can all be done with one image if properly prepared.
Here is a quick example:-

<!DOCTYPE html>
<html>
    <head>
        <title>Responsive Image Border</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <style>
            body {
                background: #333;
            }
            main {
                background: #bbb;
                max-width: 60em;
                width: 80%;
                margin: 2em auto;
                padding: 2em;
                box-sizing: border-box;
                border: 50px solid #000; /* Fall-back for calc & vw */
                border: calc(3vw + 1.5em) solid #000; /* dynamic responsive width */
                border-image-source: url(border.jpg);
                border-image-slice: 70;
                border-image-repeat: repeat;
            }
        </style>
    </head>
    <body>
        <main>
            <h1>Responsive Image Border</h1>
            <p>This uses a single image for the whole border with the diferent parts for the edges and corners defined by the slice property.</p>
            <p>Lorem ipsum dolor sit amet, eos utroque expetenda ad, te choro pericula voluptaria nam.
            Patrioque consequat democritum qui te, iriure eligendi eam cu.
            Saepe delicata id mea.
            Vel ea alia verterem neglegentur, ut nemore suscipit abhorreant ius.
            In tale verterem quaestio eos, falli dolorem percipit cu mei.</p>
            <p>Pri offendit comprehensam et, vis et dolor alterum. Pri eu aperiri legimus, deserunt lobortis no usu.
            Pro id persius nostrud voluptaria, qualisque prodesset disputationi vim no, omnes primis disputationi vis in.
            Ex sit mollis utamur percipitur, duo eu case nulla suscipiantur.</p>
        </main>
    </body>
</html>

Using this image adapted from the one I found earlier.

2 Likes

Thanks to your suggestions and http://www.border-image.com/ I now have this: http://www.westeros.org/Test/

Thank you so much for the assistance!

You could maybe fix the seams at the corners by using round for the repeat.

border-image: url(http://www.westeros.org/Graphics/bg_border.png) 27 fill round ;

That should make the end of the edge image match up with the corner images.
I think the only prefix you need for it now is -o- for Opera Mini, so you could probably drop the others.

Excellent point, thank you.

While the border-image works fine for the header and footer, I am running into issues with the sidebars. I am trying to apply it just vertically, and I end up with gaps, presumably where the corners are skipped. But from what I can tell, the slicing method is supposed to be what you use even for just vertical borders.

Additionally, but thatā€™s obviously an issue with the layout as such and not the borders, applying the borders messes up the placement of the sidebars. Is that because the border adds width?

Maybe use an ordinary tiled image if you just have vertical borders.

Yes, borders will make your element bigger according to the standard ā€œbox modelā€.
You can change this with box-sizing: border-box

Do you mean a tiled image for a background element or as a border element? I tried just using an vertical tiling image for a left border, but I couldnā€™t get that to work at least.

If you just want the sides or one side, adjust the slice values.

border-image-slice: 0 70; /* sides only border */
border-image-slice: 0 70 0 0; /* right only border */

Hmm, if I try that, I get a black border all around.

The problem is you are putting the all shorthand parameters in the border-image-slice property.

border-image-slice: url(http://www.westeros.org/Graphics/bg_border2.png) 0 30px 0 0 repeat;

Those donā€™t belong there, they only work in the border-image property or individually in their own properties.

Right, but how do I then specify the image? Or do I use both border-image and border-image-slice together?

What Iā€™ve got now is this:

.sidebar.left {
box-sizing: border-box;
border-style: solid;
border-width: 0 30px 0 0;
-moz-border-image: url(http://www.westeros.org/Graphics/bg_border2.png) 0 30 0 0 repeat;
-webkit-border-image: url(http://www.westeros.org/Graphics/bg_border2.png) 0 30 0 0 repeat;
-o-border-image: url(http://www.westeros.org/Graphics/bg_border2.png) 0 30 0 0 repeat;
border-image: url(http://www.westeros.org/Graphics/bg_border2.png) 0 30 0 0 repeat;
}

How would the whole element look correctly done?

Here I used the ā€˜longhandā€™ properties, this seems to do it for just the right side border.

border-style: solid ;
border-width: 0 30px 0 0;
border-image-source: url(http://www.westeros.org/Graphics/bg_border2.png);
border-image-repeat: repeat;
border-image-slice: 30;

Ah, thanks! It actually works with the shorthand too, as long as the slice is specified with a single value, but width has the 0 values where it should not show up. Finicky! But now thatā€™s solved, now I just need to figure out why the matchheight javascript is not working.

1 Like

It is. At first I thought you needed all 4 slice values to make it work, which is why I reverted to longhand.
But I think it needs all 4 width values.

1 Like

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