Child elements inheriting background color

Question

I am trying to make a simple parallax effect, however I also want to add a custom semi-transparent color to the background image.

I tried many solutions, this one seemed to work however the color is applied on top of the children elements, even if I am using the ::before selector.

.spannerBg {
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 background-color: rgba(255, 150, 0, 0.5);
 min-height: 300px;
}

.spannerBg::before {
 content: "";
 display: block !important;
 background-color: inherit;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

p {
  font-size: x-large;
}

<div class="spannerBg" style="
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    background-image:url(https://images.pexels.com/photos/1051075/pexels-photo-1051075.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
  
  <p>Somecontent</p>

</div>
<div>
  beiwrfa<br>ewnifiebfia<br>fbjwqbfwebfj<br>
</div>
<div class="spannerBg" style="
    background-image:url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
    <p>Somecontent</p>
</div>

<div>
  <p>somecontent</p>
</div>

I saw something about using semi-transparent pngs or fake div but I would like it to be 100% css.

I also saw this question, but all answers seem to either be not css or have the same problem

d-h-e · Accepted Answer · 2019-03-09T16:39:03.307

2

You can give your .spannerBg::before a z-index: -1 and .spannerBg a z-index: 1

The before element is now moving behind its siblings.

.spannerBg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-color: rgba(255, 150, 0, 0.5);
  min-height: 300px;
  z-index: 1;
}

.spannerBg::before {
  content: "";
  display: block !important;
  background-color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

p {
  font-size: x-large;
}

<div class="spannerBg" style="
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    background-image:url(https://images.pexels.com/photos/1051075/pexels-photo-1051075.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">

  <p>Somecontent</p>

</div>
<div>
  beiwrfa<br>ewnifiebfia<br>fbjwqbfwebfj<br>
</div>
<div class="spannerBg" style="
    background-image:url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
  <p>Somecontent</p>
</div>

<div>
  <p>somecontent</p>
</div>

edited Mar 09 '19 at 16:39

answered Mar 09 '19 at 16:25

d-h-e

2,478
1
10
18

I'll upvote this because it seems to work in the snippet, however I tried this already and won't work I don't know why. I haven't been able to reproduce it in a snippet but I am not using z-index anywhere else, so no clue why it wouldn't work – Lorenzo Mar 09 '19 at 16:32
I got it to reproduce the problem in this snippet [edited the question]; same code as the one above tho so I don't understand why it works here and not there? Maybe poor cross-browser compatibility? – Lorenzo Mar 09 '19 at 16:35
1

maybe you forgot to give `.spannerBg` a `z-index: 1` ? I didnt wrote that. I will edit my text – d-h-e Mar 09 '19 at 16:36
1

Yes just realised that. I think you should edit the answer so that other people don't miss that out – Lorenzo Mar 09 '19 at 16:37

Kai K · Answer 2 · 2019-03-09T16:28:10.730

1

I hope this helps:

.spannerBg {
background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 min-height: 300px;
}

.spannerBg::before {
 content: "";
 display: block !important;
 background-color: inherit;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

}

<div class="spannerBg" style="
background-image: linear-gradient( rgba(255, 150, 0, 0.5), rgba(255, 150, 0, 0.5) ), url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg);
">
    <p>Somecontent</p>
</div>

edited Mar 09 '19 at 16:28

answered Mar 09 '19 at 16:20

Kai K

80
4

I like this, but is there a way to have multiple elements with the same gradient but different images, without repeating the `linear-gradient` every time? – Lorenzo Mar 09 '19 at 16:33
Also the snippet is very laggish, is that my browser or a problem with this integration? – Lorenzo Mar 09 '19 at 16:33

Child elements inheriting background color

2 Answers2