0

I have the following problem, Im trying to make a navigation bar with ul in django with css using a background image. The problem is that I want its opacity to be 0.5, but when I do it, the words also gain opacity, which I don't want. So I read that if I use a "pseudo-element" (using ::after in the ul) I could raise the opacity of the background without affecting the words. I used the content:"" variable.

ul{    
margin: -0.5em 0 0 -0.5em;
width: 82.5em;    
}
ul::after{
content:"";
background-image:url("fondo.jpg");
opacity: 0.5; 
}

The problem is that after doing it, the ul doesn't load the background, but if I put the background-image in the ul one (without the ::after), it does. Im clearly very noob at this, hehe, thanks!

What i get when I put the image in ::after

What I want to get, when I put the image in ul, but if I change its opacity, I also change the words

The first picture is what I get when I put the image in the ::after. The second is what I get when I put it in ul. But if I change its opacity, I also change the words.

iklinac
  • 14,944
  • 4
  • 28
  • 30
Oto
  • 121
  • 5
  • Your CSS code only works in context of the HTML, so please post the relevant parts of the HTML as well. – Klaus D. Jan 27 '21 at 03:32

1 Answers1

0

You can use linear-gradient like:

background-image: linear-gradient( to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("fondo.jpg");

Here you change the 0.8 to the opacity of the background you want.

Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24