Using Images as Dividers

Most people just use the <img> tag when they want to use an image as a divider, but this method I'm going to show you follows semantic HTML and is easier to edit if you want to change it later. Basically, you just use <hr> and then use CSS to set its background to your image of choice.

Basic Graphics

hr {
    background-image: url("rainbowdivider.png"); /* change to the file path to your image */
    height: 45px; /*Same height as the original image, change to match your images height*/
    background-size: contain; /* Makes sure the image doesn't get cut off on smaller screens */
    background-repeat: no-repeat;
    background-position: center;
    border: none; /* Removes default hr styling */
}

This is my recommended styling for basic divider graphics. I highly recommend changing the height to match whatever the original height of the image is.

Repeating Patterns

hr {
    background-image: url("stardivider.png"); /* change to the file path to your image */
    height: 19px; /*Same height as the original image, change to match your images height*/
    background-size: contain; /* Makes sure the image doesn't get cut off on smaller screens */
    background-repeat: repeat-x; /* Has the image repeat infinitely on the x-axis */
    border: none; /* Removes default hr styling */
}

This is a cool little advantage to using background images over HTML images. If you have a repeating pattern, you can change background-repeat: no-repeat; to background-repeat: repeat-x; and it'll repeat infinitely on the x-axis (left and right, not up and down).

It's also responsive to screen size. Change your window size or turn your device sideways, you'll see that the graphic adjusts itself without changing the actual width/height or pushing around other elements on the page.