css background image before and after h1 tag

Question

I have to style all h1 tags to have an image before and after h1 text.

I know how to add image before, but do not know how to add both.

CSS (styling h1 to have image before text)

h1 {
        background-image: url('images/h_ltr.png');
        background-position: left center;
        background-repeat: no-repeat;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        color: #5d5d5d;
    }

Answer 1

You can use the :before and :after css selectors.

h1:before {
    background-color: green;
    padding: 0 20px;
    content: " ";
}
h1:after {
    background-color: red;
    padding: 0 20px;
    content: " ";
}

<h1>Test</h1>

Answer 2

You can also use multiple background images. In this example, I set background images for the left, centre and right bg images:

h1, h2, h3, h4, h5, h6 {
    background-image: url("images/heading-bg-left.png"), url("images/heading-bg-right.png"), url("images/heading-bg-center.png"); /* set each bg image */
    background-position: left center, center center, right center; /* set position of each bg image */
    background-repeat: no-repeat, no-repeat, repeat-x; /* set repeat of each bg image */
    padding: 0 92px; /* 92px is the width of my left and right bg images */
    height: 120px; /* 120px is the height of each bg image */
    line-height: 120px; /* ditto */
}

The code is fairly self-explanatory, but basically I have used three background-images with three background-positions and three background-repeats.

Note that the image are rendered in reverse order. So, in my example, the left and right images will be drawn on top of the centre image.