There is a fragment of markup:

<div class="item"> <img src="" alt=""> <p>Наполнение</p> </div>

And the relevant style fragment:

 .item img { content: url(../img/star.png); width: 50px; margin-bottom: 15px; margin-top: 25px; }

In general, it works correctly, but not in all brewers. Or rather, the image is not displayed. In Chrome, everything works, but when viewed in Fox or in Edge, the image is not displayed, if it simply does not exist. In debugging, everything is in place:

enter image description here

I assumed that it is necessary to explicitly set the height, but in the end, the empty space simply increases. How can this be corrected?

PS Used by Bootstarp.

    1 answer 1

    It's amazing that it works somewhere. http://htmlbook.ru/css/content Note the phrase "applies to pseudo-elements: before and: after"

    • Well then it is clear, then the question is, how to set the src value correctly? I suppose that with the help of this pattern: background: url(../img/star.png); background-size: 100%; background: url(../img/star.png); background-size: 100%; Or is there a more specialized property? - BwehaaFox
    • Yes, you can use background or background-image. Just swap img in the code for a div. Regarding the background-size, I was offered to give it not 100%, but cover. - Andrey Fedorov