CSS Background: Layering the Images

The background CSS is a property in CSS to set all background style property like color, image, origin, size, anything. I just found out how to use it property for modern design.

Website design have a lot of evolution, from basic and simple design to complex and beautifull design. Latest design of website require some unique new element and effect to create outstanding website.

Multi Image Background CSS.

For example our design looks like this, we should add little image at the corner. or background hero.

example design

We could use Position CSS property to set little image to that position, but background css alone able to do it. To achieve this, we use Multiple Background

So, we have to write section hero, this is the example

  <body>
    <section class="hero">
      <h1>We are awesome team for your business dream</h1>
    </section>
  </body>

And this is the style css.

.background-hero {
    min-height: 90vh;
    background: #faede3 url("https://i.ibb.co/MBJBvCP/Group-1000004575-1.png") no-repeat bottom left/100px;
}

The result is:

Result multi background

Ow, nice!. It show as expected, but the code looks to long for me!.

Ok, let me break down it for you.

To create multiple image in background property, we can combine it using single line

.multi-background {
  background: url("image1.png"), url("image2.png");
}

Set other property like

repeatable, e.g no-repeat/repeat-x/repeat-y/space/round,
position bottom/top/left/right
position percentage, e.g bottom 50%, left 50%
Size of image, e.g 100px (100px max width or height)
size of image percentage, e.g 50%

.multi-background {
  background: url("image1.png") no-repeat bottom left/50%, url("image2.png") no-repeat top right/100px 200px;
}

That property tell the browser to render image1.png at the bottom left and 50% size of image, and image2.png at top right with size 100px width and 200px size. Pay attention the / at value position and size.

We can combine more image using this script.

section.hero {
  min-height: 90vh;
  background: url("https://i.ibb.co/MBJBvCP/Group-1000004575-1.png")
      no-repeat bottom left / 100px,
    url("https://i.ibb.co/MBJBvCP/Group-1000004575-1.png") no-repeat top
      right / 100px,
    #bee1e6 url("https://i.ibb.co/HxjY0QC/Rectangle.png") no-repeat bottom
      center/50%;
}

Please take a note that I only add background-color #bee1e6 on the latest image, because the first background image will located at top layer and the last background image at bottom layer of layering system.

To minimize the confusion, we can separate the property and set the value based on position array of image

section.hero {
  min-height: 90vh;
  background-color: #bee1e6;
  background-image: url("https://i.ibb.co/MBJBvCP/Group-1000004575-1.png"),
    url("https://i.ibb.co/MBJBvCP/Group-1000004575-1.png"),
    url("https://i.ibb.co/HxjY0QC/Rectangle.png");
  background-position: bottom left, top right, bottom center;
  background-size: 100px, 100px, 50%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

Conclusion

Background property css able to add multiple image at the same time, also it support positioning and size of the image. Knowing this method, we can elevate frontend method to create beautifull website using simple code. I hope this give you new insight, thanks for the reading, see you next time.