How to Apply Different background-repeat to Multiple Backgrounds in CSS?

Find out how you can apply different background-repeat to multiple backgrounds in CSS

When you're using multiple CSS background images, you can apply different background-repeat property values to individual images by using a comma separated value, for example, like so:

background-image: url(1.jpg), url(2.jpg), url(3.jpg);
background-repeat: repeat, no-repeat, repeat-x;

The background-repeat property values are applied to images from left to right. So, in the example above, it would be as follows:

  • background-repeat: repeat will be applied to 1.jpg;
  • background-repeat: no-repeat will be applied to 2.jpg;
  • background-repeat: repeat-x will be applied to 3.jpg;

Hope you found this post useful. It was published . Please show your love and support by sharing this post.