# Pseudoelement for background image

**URL:** <https://forum.pinegrow.com/t/pseudoelement-for-background-image/6893>\
**Category:** Beginners\
**Tags:** css\
**Created:** [September 3, 2022, 3:11pm UTC](https://forum.pinegrow.com/t/pseudoelement-for-background-image/6893 "2022-09-03T15:11:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Josan](https://avatars.discourse-cdn.com/v4/letter/j/dec6dc/32.png) [@Josan](https://forum.pinegrow.com/u/Josan)\
**Post date:** [September 3, 2022, 3:11pm UTC](https://forum.pinegrow.com/t/pseudoelement-for-background-image/6893/1 "2022-09-03T15:11:50Z")

</div>

Hi. My english is very limited, sorry.  
I’m studying pinegrow’s bootstrap 5 examples. Some hero sections have the background as a pseudo element. Why and when to do it like this?

 ![Captura de Pantalla 2022-09-03 a las 17.06.08](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/c2717cb929ee65a7674834ba6b0c2f89d0b9fead.png)

---

<div class="post-metadata">

**Author:** ![Wolfgang.Hartl](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/wolfgang.hartl/32/4621_2.png) [@Wolfgang.Hartl](https://forum.pinegrow.com/u/Wolfgang.Hartl)\
**Post date:** [September 27, 2022, 8:33am UTC](https://forum.pinegrow.com/t/pseudoelement-for-background-image/6893/2 "2022-09-27T08:33:03Z")

</div>

I normally use pseudo-elements in combination with background-images when it comes to overlaying colors.

But I use it the other way round. The class .poster would get the “background-image” and the :before would get a background-color or gradient as overlay! Maybe it also works this way you posted it, not sure about that without seeing everything. But that could be a possible reason!

---

<div class="post-metadata">

**Author:** ![Josan](https://avatars.discourse-cdn.com/v4/letter/j/dec6dc/32.png) [@Josan](https://forum.pinegrow.com/u/Josan)\
**Post date:** [September 27, 2022, 12:16pm UTC](https://forum.pinegrow.com/t/pseudoelement-for-background-image/6893/3 "2022-09-27T12:16:14Z")

</div>

I understand. Thank you for helping me in my learning.

---

<div class="post-metadata">

**Author:** ![Wolfgang.Hartl](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/wolfgang.hartl/32/4621_2.png) [@Wolfgang.Hartl](https://forum.pinegrow.com/u/Wolfgang.Hartl)\
**Post date:** [September 27, 2022, 12:21pm UTC](https://forum.pinegrow.com/t/pseudoelement-for-background-image/6893/4 "2022-09-27T12:21:39Z")

</div>

You’re welcome and sorry for the late reply. Feel free to ask any questions here I’m sure the community will help you out if they can! 😉

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [September 27, 2022, 6:28pm UTC](https://forum.pinegrow.com/t/pseudoelement-for-background-image/6893/5 "2022-09-27T18:28:53Z")

</div>

> [@Wolfgang.Hartl](#):
>
> But I use it the other way round.

This is the way I prefer doing it as well. By making the image your main element, you can use Srcset, Lazy Loading, and other things that pseudo-element images can’t do.