JSFiddle - React, Tailwind, and code Playground

by Alexey Ukolov

HTML

<div id="carl-one"></div>
<div id="carl-two"></div>
<div id="alpha-one"></div>
<div id="alpha-two"></div>

CSS

#carl-one {
  background: #eb01a5;
  background-image: url(https://i.ytimg.com/vi/dkLjxG10dj4/maxresdefault.jpg); /* fallback */
  background-image: url(https://i.ytimg.com/vi/dkLjxG10dj4/maxresdefault.jpg), linear-gradient(#eb01a5, #d13531); /* W3C */
}

#carl-two {
  background: #eb01a5;
  background-image: url(https://i.ytimg.com/vi/dkLjxG10dj4/maxresdefault.jpg); /* fallback */
  background-image: linear-gradient(#eb01a5, #d13531), url(https://i.ytimg.com/vi/dkLjxG10dj4/maxresdefault.jpg); /* W3C */
}

#alpha-one {
  background: #eb01a5;
  background-image: url(http://coldmetal.3dn.ru/_ld/0/97132458.png); /* fallback */
  background-image: url(http://coldmetal.3dn.ru/_ld/0/97132458.png), linear-gradient(#eb01a5, #d13531); /* W3C */
}

#alpha-two {
  background: #eb01a5;
  background-image: url(http://coldmetal.3dn.ru/_ld/0/97132458.png); /* fallback */
  background-image: linear-gradient(rgba(235, 1, 165, 0.5), rgba(209, 53, 49, 0.5)), url(http://coldmetal.3dn.ru/_ld/0/97132458.png); /* W3C */
}

#carl-one, #carl-two,
#alpha-one, #alpha-two {
  width: 400px;
  height: 400px;
}