TIL: Multiple Backgrounds with CSS background

- 1 min

Today I discovered a clever trick with CSS background images. It’s possible with CSS to have multiple images in a single background-image tag, which is unique and can come in handy for many use cases.

How to do it

<section>
<section />
section {
  background-image: url("https://source.unsplash.com/random/150x150"),
    url("https://source.unsplash.com/random/150x200"),
    url("https://source.unsplash.com/random/150x250"),
    linear-gradient(
      90deg,
      rgba(52, 130, 253, 1) 43%,
      rgba(255, 255, 255, 1) 80%
    );
  background-position: top left, bottom right, center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;
}

You can also play with this here

See the Pen Multiple Background Images by Ritik Patni (@ritikpatni) on CodePen.

rss facebook twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora