Opacity not working

1

Hello I am trying out some practice on my html and css.
Now trying to add opacity to the background image seems not to be working…please help me out

Here’s my code so far…

2

I think it is not specified for this particular image.
it should something like this for example:

img:hover {
  opacity: 1.0;
}

this specifies it for the “img”

3

Hello @ugoamaka,
that’s a problem with non-png images.

Try escaping the problem with a linear gradient:
background-image: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.8) 100%), url('https://image.freepik.com/free-vector/vector-illustration-mountain-landscape_1441-72.jpg');

4

Thanks @slay.py
If I understand what you did, it means that its only png images that support opacity.
So am wondering if its possible to convert other img formats to png or I’ld rather always seek out png images each time I want to use opacity?

5

Nope, that’ s not what I meant!
If you want to change your jpg images opacity you can do whenever you want with

img{opacity:0.5;

But that’s not the case of a background-image instantiated with CSS.
You can’t set an opacity directly to a background image. You have to set the opacity with another tool ( i.e. giving opacity to a png image and then use your opacized image), or by using the method above, or by using pseudo-selector in css, or by adding a translucent png image beyond your background-image.
If you are interested I can link you some of these methods to give your background-image opacity!
cheers

6

I’d probably just use a pseudo-element for the background image.

Example code 
body {
  /* just to show position fixed working */
  height: 2000px;
  margin: 0;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  width: 100%;
  min-height: 100%;
  background-image: url("https://image.freepik.com/free-vector/image-upload-concept-illustration_23-2148277347.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1;
  opacity: 0.5;
}
7

I understand it now.
@slay.py
I learnt something today. Judging from the options you presented the pseudo selector works real easier. I will be learning more about the pseudo selectors now.
Thanks a lot @lasjorg your code did the margic.
@anon58011934 thanks too
You all are wonderful .

2 Likes