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

When using multiple backgrounds in CSS, you can set the background-size property for each background individually by using a comma separated value, for example, like so: 

background-image: url(1.jpg), url(2.jpg), url(3.jpg), url(4.jpg);
background-size: cover, 300px 250px, contain, auto;

The background-size property values are applied to images in the same order as they appear in the background-image property (i.e. left-to-right). So, in the example above, this would mean that:

  • background-size: cover will be applied to 1.jpg;
  • background-size: 300px 250px (where the values denote width and height respectively) will be applied to 2.jpg;
  • background-size: contain will be applied to 3.jpg;
  • background-size: auto will be applied to 4.jpg;

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.