PSEUDO ELEMENT, CONTENT (IMG) AND BACKGROUND TOGETHER

Question

PSEUDO ELEMENT, CONTENT (IMG) AND BACKGROUND TOGETHER

Navigation

#1 by (0 votes)

1

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

Does anyone know 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

asked by anonymous 17.04.2018 / 20:22

1 answer

JavaScript Functions How to set and access session after using session_name

score 0 · Accepted Answer

Your question is a bit confusing, but let's break it down.

Yes it is possible to do everything with a class only and a ::after , type #minha_classe and #minha_classe::after

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

Now let's take a look at what I understood from 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>