CSS - set multiple images as element background

0 points
Created by:

In this article, we would like to show you how to set multiple images as element background using CSS.

Quick solution:

body {
  background-image: url(example-image1.jpg), url(example-image2.jpg);

with positioning:

body {
  background-image: url(example-image1.jpg), url(example-image2.jpg);
  background-position: left bottom, right top;
  background-repeat: repeat, no-repeat;


Practical example

In this example, we add two background images to the div element using background-image property with multiple urls. Additionally, we set images position and disable repeat.

// ONLINE-RUNNER:browser;

<!doctype html>

      div { 
        height: 100px;
        width: 400px;

        /* set multiple image background */
        background-image: url(, url(;

        /* images configuration */
        background-position: center, left top;
        background-repeat: no-repeat, repeat;

    <div style="color: white;">Page content here...</div>
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂