How to Hide One or More Background Images When Using Multiple Backgrounds in CSS?

When using multiple backgrounds in CSS, you can hide one or more background images by setting their background-size property value to 0. For example:

background-image: url(1.jpg), url(2.jpg), url(3.jpg), url(4.jpg);
background-size: cover, 0, 0, auto;

This would hide the second and third background images, and only show the first and fourth one. You could use the same technique to hide just one, or as many background images as you want.

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.