PSEUDO ELEMENT, CONTENT (IMG) AND BACKGROUND TOGETHER

Asked

Viewed 1,530 times

1

I need some "hint" on how to make it work in the pseudo-element ::before the content (with image, a photo for example) and a background transparent, all in the same class. A

someone knows how ? 

#minha_classe::before {
    position: relative !important;
    content: url(photo.jpg) !important;
    height: auto;
    top: 0%;
    left: 0%;
    margin-left: -50%; /* meio da imagem */ 
    transform: translate(-50%, -50%);

    background-color: rgba(165, 30, 30, 0.7) !important;
    background-size: 100% 100%;
    width: 1000px;
    height: 1000px;  
}
css

  • You can see in this question that the tag <img> does not receive pseudo-element because it is an element of type void, ie is a tag that has no lock type </img> then the solution would be to place the image inside a div and the pseudo element in the <div> and not in the <img> https://answall.com/questions/263040/os-pseudo-elementos-after-e-before-funcionam-em-quais-input-types

  • Summarizing not to put ::before or ::after right on the img tag, but you can have a div with two backgrounds, one with the image and the other with the middle transparent color on top, or use the pseudo-element in the div with the image in the background, if that’s what you want I can make a basic example for you.

  • I don’t understand, could you show me ? I use only a div ?

  • I didn’t understand hugocsl, could you exemplify ? because this example I used above is a Download that I use in opening the web page

1 answer

0


Your question got a little confused, but let’s go in pieces.

Yes it is possible to do everything with one class and one ::after, guy #minha_classe and #minha_classe::after

According to the tag <img> does not accept pseudo element, as well as other tags that do not have closure such as <input>, <hr> etc... you can read more on this question Pseudo elements ::after and ::before work on which input types

Now let’s go to the example within what I understood of the question and reading the comments...

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#minha_classe {
    position: relative;
    background-image: linear-gradient(rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%), url(http://placecage.com/200/200);
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#minha_classe::after {
    content: "";
    background-image: url(https://thumbs.gfycat.com/MatureBestBlackbear-max-1mb.gif);
    background-size: cover;
    position: absolute;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<div id="minha_classe"></div>

  • hugocsl, it worked as you went, thank you very much! I was performing a #my_class::before and a #my_class::after, but not putting the class itself, without the pseudo-element. This has already helped the understanding. But what I found show was the linear gradient along with the url in the background-image, I would never know that the background-image performs this task. It worked perfectly! Very good example your ! thank you very much !

  • @Eitaehnoiz this tip is worth gold right rss. If my answer helped you in any way consider marking it as Accept, in this icon below the arrows on the left side of my answer :) so the site does not get open questions pending without response accepted.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.