Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Compass Basics Compass Helper Functions Image Dimension Helpers

David Service
David Service
12,928 Points

Why Position Images as Pseudo-Elements?

At the 4:30 mark, Guil goes on to explain that we're going to be placing the images for this exercise as pseudo-elements.

My question here is, why would we do that? Is there some specific advantage(s) to this method, or is it simply something different that Guil chose to do? Wouldn't using the "background-position" property do the same thing?

As far as I can tell, the way we where displaying our images was working just fine and this is simply an added complication to this lesson.

Please let me know if I'm wrong.


Zach Saul
Zach Saul
11,156 Points

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.

David Service
David Service
12,928 Points

Hi Zach,

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

Many thanks,