Help Transparent Overlay

[Mx.Trinity]

Hey! So I'd like to make a transparent gif overlay on a background without turning EVERYTHING transparent. I'm using the "opacity: xy%;" and it's turning everything transparent. How do I isolate the transparency of that particular gif to just the background and nothing else?

 

[fluticasone]

It'd be best if I could see the code in question, since I can't visualize what you want done.

Below's some general advice when dealing with opacity.

Unfortunately, all child elements will automatically follow the parent element's opacity. You're better off manually doing it on a graphic editing software if my understanding of your question is correct.
You could also use positioning, but that tends to be more trouble than it's worth.

If you opt to edit the gif's transparency yourself via editing software, you can just use

background: url(if image, if a normal color just state your hex), url(gif);

and it should layer it for you.

 

[Mx.Trinity]

well just imagine a background with text boxes ontop of it. I want to put a transparent gif over the background without affecting the front elements (text boxes, other images, etc.) I think it has something to do with CSS

 

[Fable]

well just imagine a background with text boxes ontop of it. I want to put a transparent gif over the background without affecting the front elements (text boxes, other images, etc.) I think it has something to do with CSS

There actually isn't a way to do exactly what you want via the coding here on RPNation (that I know of) as there isn't really a true way of even doing it with just CSS, you have to create a pseudo element. You can read about that here.

You would have to actually make the image you want transparent.

 

[Mx.Trinity]

There actually isn't a way to do exactly what you want via the coding here on RPNation (that I know of) as there isn't really a true way of even doing it with just CSS, you have to create a pseudo element. You can read about that here.

You would have to actually make the image you want transparent.

Ah so as fluticasone said. Probably easier than coding for margins.

 

[Fable]

Ah so as fluticasone said. Probably easier than coding for margins.

Basically. You can always try creating a completely separate DIV with the bg transparent, but you would have to position it to overlay exactly. Not sure it would work that well since I've never bothered with the attempt myself, I've just heard of the method.

 

[IctoraPost]

Here's an example of what Fable is talking about.

.

CONTENTCONTENTCONTENTCONTENT

[div=
  width: 200px;
  height: 200px;
  position: relative;
  background: url(https://i.imgur.com/T9BW6tB.jpg);
][div=
  background: url(https://media.giphy.com/media/xTiTnxpQ3ghPiB2Hp6/giphy.gif);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
].[/div]CONTENTCONTENTCONTENTCONTENT[/div]