How do you use ::before, to apply Absolute image behind it's DIV?

[simona6]

We want to place a star behind before a box.

So we are applying CSS like this:

.grve-feature-header #right::before {
    content: url(/images/grey-star.webp);
    width: 200px !important;
    position: absolute;
    left: -84px;
    top: 0px;
    z-index: -2;
}

All it does is to put the star in front of the box.

The main DIV it is 'before' is relative positioning.

So two questions:

1) how do I get this to show BEFORE the box (so it is behind it... maybe a bit sticking out the side)

2) how do I set it's width, as it refuses to change it... you might want it smaller on a phone, so being unable to do that is a drag.

[gizmola]

A platform like codepen or jsfiddle would be good for you to provide a full example.  

You have a class, so why are you trying to specify an element by ID?  

I would expect that you would simply specify .grve-feature-header::before { } but again you didn't provide the parent css.

It seems you are trying a variation of this, but using a background image is more typical:  https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

For the sizing (assuming a media query) you might try applying a transform as in something like:

.grve-feature-header #right::before {
    position: absolute;
    left: -84px;
    top: 0px;
    background: no-repeat url(/images/grey-star.webp
    transform: scale(0.8);
}