CSS image opacity only

Question

I have a page at http://shivampaw.ml/blog

It has a header image and is using Wordpress. I am trying to make the header image slightly less opaque and set it to opacity: 0.6

However when I use:

site-header{
     opacity: 0.6;
}

It makes the entire div less opaque. I have researched and I don't think I can change the divs as they are using Wordpress.

How can I achieve this?

Is it also possible to make the background image fixed? Right now it repeats which means it has a weird colour change. I want to avoid that so can I make it fixed? I tried changing background-attachment but that didn't work.

score 1 · Answer 1 · edited Mar 18 '16 at 08:50

1

Maybe try removing the background from .site-header, and then add the following pseudo classs as detailed here and here

.site-header {
   position:relative;
}

.site-header::after {
  content: "";
  background: url("./images/header.png");
  opacity: 0.6;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

edited Mar 18 '16 at 08:50

NiZa

3,806
1
21
29

answered Mar 18 '16 at 08:45

Jeffrey04

6,138
12
45
68

score 0 · Answer 2 · answered Mar 18 '16 at 08:42

You could use another div containing the image and setting the div opacity to 0.6 instead of setting a background image in the css.

Or, you could edit the image and set it's opacity to 60% via an image editor tool such as Photoshop, Gimp or another one :)

CSS image opacity only

2 Answers2