TIL: CSS multiple backgrounds

I'm a huge fan of CSS. I've been working with it for a few years, and I'm still learning it every day.

Today I learned that we can use multiple backgrounds on a single element with CSS. It is possible because the background property is specified as one or more background layers, separated by commas.

Multiple backgrounds

With multiple backgrounds, we can achieve exciting effects using only CSS. See an example in the demo below.

Background image by Andrea De Santis, on Unsplash.

Also, here's the CSS code that I used to create the demo above:

.rocket {
    background:
      url('/icon.png') no-repeat center 80%,
      url('/image.png') no-repeat center center;
    transition: background-position 1s;
    background-size: 50px, 100%;
    width: 400px;
    height: 400px;
}

.rocket:hover{
    background-position: center 10%, center;
}

And the HTML:

<div class="rocket"></div>

Pretty cool, huh?

A11y:

Sadly, most browsers don't provide information on background images to assistive technology - such as screen readers. If the element you're creating contains any essential information about the page, you should consider describing it semantically in the document. See more here.