Opacity in CSS to not affect the div

Question

I have a code that put a background image in a div but when I use opacity all the div is affected even the text inside it here is my code;

  .banner_area .banner_inner {
    opacity: .5;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 395px;
    background: url(../img/breadcrumb/checkout-bg.jpg) no-repeat center bottom;
    background-size: cover;
    z-index: 1; }

I tried background: rgba(0, 0, 0, 0.6); but my image is not displaying

also I've tried background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url(../img/breadcrumb/checkout-bg.jpg); but its not working

Can you post the HTML? Right now, you're trying to select a *child* of `.banner_area` with the class of `banner_inner`. Is that what you're trying to do? — Joel Hager, Apr 27 '20 at 06:23
Does this answer your question? [Can I set an opacity only to the background image of a div?](https://stackoverflow.com/questions/7241341/can-i-set-an-opacity-only-to-the-background-image-of-a-div) — Yuriy, Apr 27 '20 at 06:27

score 2 · Accepted Answer · answered Apr 27 '20 at 06:31

Not sure if this helps, as can't see the htmlt but first I'd add the overlay dynamically with the ::before pseudoelement and then will fix the z-index

.banner_area:before {
  opacity: .5;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 395px;
  background: url(../img/breadcrumb/checkout-bg.jpg) no-repeat center bottom;
  background-size: cover;
  z-index: -1; 
}

Then would put the content and should not be opaque

Before works thanks !!! – Martney Acha Apr 27 '20 at 06:48 — Martney Acha, Apr 27 '20 at 06:48

score 1 · Answer 2 · answered Apr 27 '20 at 06:34

I have created one JS fiddle . Is this something you are looking for?

 .banner_area .banner_inner {
    opacity: 0.5;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 395px;
    background-image: url('https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492__480.jpg');
    background-repeat: no-repeat;
  background-attachment: bottom;
  background-position: center;
    z-index: 1;
    }

Opacity in CSS to not affect the div

2 Answers2