Multiple background images using css

Recently I had the opportunity to participate in a Pre-Hackathon challenge to recreate a pixel-perfect design. It was no joke, to say the least, a lot was going on in the design and I also had to add animations to give it that extra wow factor 💫🤩.

Here is a link to the design if you are interested to see and also a link to my solution.

The background of the design had a purple-bluish shimmer light in certain spots, and that was the first time I was replicating that. So my first solution was since each section in the page was a component on its own, I could just add a background for each section, seems straightforward and problem solved yeah? Well no, as I was going over the design I realized that the shimmering light in certain sections looked like it was overflowing to the section below it. So of course I had to go back to the drawing board again and I got curious, is there a way I can add multiple background images to a page lo and behold I totally can.

And that is why we are here folks, come along and let's see how to go about it. For this use case, I'll be using HTML and CSS. If you notice, in the Figma design the purple lens flare is an image, so that is what I'll be using too.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <main class="main-body" id="app">
      <div>
        <h1>Hello there!</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt
          porttitor orci, vitae condimentum lectus efficitur sit amet.
        </p>
      </div>
    </main>
  </body>
</html>

Okay now that we have our index.html file set up, on to styling. That is where all the magic happens

/*base styling*/
*,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #150e28;
  color: #ffffff;
}

div {
  padding: 2rem;
}

/*main styling for multiple background*/
main {
  height: 565.375rem;
  background: url("./Purple-Lens-Flare.png");
  background-position: 0px -1%;
  background-size: 68%;
  background-repeat: no-repeat;
}

Okay now we have added the first image, notice I added height to main since we don't have much content on the web page for now. This will help give an idea of how it would look in a real project.

Also if you check the page out in your browser you will notice that the color is more purple than blue, so to get the blue-ish color, we will add a background color and blend mode like so;

main{
   /* previous styling */
   background-color: #150e28;
   background-blend-mode: hard-light;
}

Now let's continue, to add more images we just add a comma and then the image URL and position respectively, we will continue like so

main{
  height: 565.375rem;
  background: url("./Purple-Lens-Flare.png"), 
              url("./Purple-Lens-Flare.png"),
              url("./Purple-Lens-Flare.png");
  background-position: 0px -5%, 10px 10%, 1000px 15%;
  background-size: 68%;
  background-repeat: no-repeat;
  background-color: #150e28;
  background-blend-mode: hard-light;
}

Multiple backgrounds using CSS