Why Position Images as Pseudo-Elements?

Well, in some ways you are right - you can achieve the same result just using background position, but the benefit to using pseudo elements in this way (positioning images) can be useful is that it doesn't disrupt your markup, of the contextual properties of your other elements.

when you want to traverse through your markup later (either using CSS selectors, or later when you learn JavaScript) in any number of ways - it will be to your benefit to keep your markup clean, and free of unnecessary elements.

I have found that Psuedo-elements are particularly useful when you are trying to position png images on top of one another, and they are also useful when you want to achieve absolute centering for a container with relative measurements.

I'll give you a really simple example:

<div> <img src='example-bg'> </div>

now my goal is to place a second image which is SMALLER than 'example' on top of it, and positioned exactly in the center. youare correct that your first thought might be to use background-position, but unless you know the exact width and height of the image you want to place on top, and your parent has absolute height and length, you are going to be in for some very messy math - because background position, (as terrific as it is) doesn't place the axis in the center of your new image.

it would be WAY easier to just use an absolute centering trick and place the 'topper' image into a pseudoelement class outside the regular document flow.

div { position: relative; }

img { position: relative; }

img::before { content: url('topper.png'); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

you will obviously be adding some details to your own code but i hope conceptually that makes sense.

Hi Zach,

That makes perfect sense. Thanks for such an in-depth explanation. :)

Many thanks,

David