How to set opacity for background images using css?

Question

I need to set opacity for my background image and need a solid text through the image. I have gone through several methods for this but I didn't found any solution satisfying my requirement. Can you suggest me the best method for this purpose. Finally all what I want is a div like this.

I have gone through many solutions, but majority of them sets the opacity of the div content along with the background. But I need to have a solid contents inside the div as shown in image.

Possible duplicate of [How do I give text or an image a transparent background using CSS?](http://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css) — Captain Squirrel, Nov 09 '16 at 12:22
`div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }` — Banzay, Nov 09 '16 at 12:23
Could have 2 div on top of each other on different z-index and then simply apply opacity to the one unde., — GillesC, Nov 09 '16 at 12:23
I have gone through the Question that mentioned in comment this is not what I want. That question sets the opacity of the div content along with the background — Nitheesh, Nov 09 '16 at 12:31
@kieran yep, flagged as a duplicate, OP-> just scroll down you would have find the answer, also GOOGLE IT before asking a question. https://www.google.fr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css%20opacity%20on%20image first link lmao! — N.K, Nov 09 '16 at 12:56
I have googled it before submitting the post. More over this is a learning site. — Nitheesh, Nov 09 '16 at 13:02

Jim Fahad · Accepted Answer · 2016-11-09T12:51:47.360

2

Use linear then background image URL, something like this

element {
  background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.8)) repeat scroll 0 0, rgba(0, 0, 0, 0) url("yourImageURL.jpg") repeat scroll center center;
}

edited Nov 09 '16 at 12:51

answered Nov 09 '16 at 12:34

Jim Fahad

635
1
8
21

Thanks. I have got the solution by modifying your result. – Nitheesh Nov 09 '16 at 12:49

score 0 · Answer 2 · answered Nov 09 '16 at 12:23

0

The class img will be like this:

img {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

answered Nov 09 '16 at 12:23

mgm793

1,968
15
23

score 0 · Answer 3 · answered Nov 09 '16 at 12:24

0

Can you overlay the text with a separate div which has the background? In that case you can set the opacity of background div without affecting the text:

opacity: 0.5;

answered Nov 09 '16 at 12:24

Anna

79
1
7

score 0 · Answer 4 · answered Nov 09 '16 at 12:38

If you want to insert <img tag and use it as a background, then you can do this:

HTML:

<div class="intro">
  <h1>Welcome</h1>
  <img src="link/to/yourimage.jpg">
  <div class="overlay"></div>
</div>

CSS:

.intro{
  text-align: center;
  position: relative;
 }
.overlay{
  position: absolute;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}
.intro h1{
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0,50%);
}

Fiddle: https://jsfiddle.net/7hp3vx6c/

score 0 · Answer 5 · answered Nov 09 '16 at 12:50

You can do something like this:

.background__picture{
    position:relative;
}
.text_&_opacity {
    position: absolute;
    width:;
    height:;
    top:;
    left:;
    background-color: rgba(249, 251, 246, .1);
}

/*if the element is last, you can try:*/

.class_of_element_after_the_picture {
    position:absolute;
    margin-top: - (here comes the picture height)px;
    background-color: rgba(249, 251, 246, .1);
}

How to set opacity for background images using css?

5 Answers5