What Is the Stacking Order of CSS Background Images?

A background image (or a gradient) that appears first in the list of multiple background images (and/or gradients) is the one that sits on the very top, followed by the next one in the list, and so on. For example:

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

In the example above, the images will be stacked in the following order:

  • 1.jpg will be stacked above all other images;
  • 2.jpg will be stacked in the middle;
  • 3.jpg will appear at the very bottom.

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.