CODEWITHSUNDEEP
cssbackground-image
Radllaufer
Radllaufer

Reputation: 307

Is it possible to blend repeated background images?

Is it possible to blend the iterations of a single background-image when background-repeat is set to repeat like so:

Solutions using javascript are also welcome.

Thanks in advance

Upvotes: 0

Views: 856

Answers (1)

Liftoff
Liftoff

Reputation: 25392

You would need 2 images for this.

  1. one that tiles seamlessly

enter image description here

  1. and the starting top image which doesn't tile.

Your element will use the tileable one as its background. The background position Y should be the height of the non-tileable one.

You can then add a pseudo element ::before on top of your element positioned to the top which has the background of your non-tileable image.

div
{
  position: relative;
  width: 813px;
  height: 2000px;
  border: 3px solid red;
  background-image: url(https://i.imgur.com/joeNpq8.png);
  background-repeat: repeat-y;
  background-position: 0 682px;
}

div::before
{
  content: '';
  width: 813px;
  height: 682px;
  background-image: url(https://i.sstatic.net/pEovt.png);
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}
<div></div>

Upvotes: 1

Related Questions