Languages
[Edit]
EN

CSS - set multiple images as element background

0 points
Created by:
Inayah-Alexander
437

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>
<html>
  <head>
    <style>

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

        /* set multiple image background */
        background-image: url(https://dirask.com/static/bucket/1631891312626-6pQmxaWAb5--background-h200px.jpg), url(https://dirask.com/static/bucket/1631897134681-eZA1OxrY4z--image.png);

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

    </style>
  </head>
  <body>
    <div style="color: white;">Page content here...</div>
  </body>
</html>
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.

❤️💻 🙂

Join