Text with background image from underlayered div

Question

I need to set text to have background from parent div, the problem I got is that I cannot set that background, because I have the text inside another div. Here is example.

.p1{
  background-color: pink;
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p2{
  width: 250px;
  height: 250px;
  text-align: center;
  background-color: green;
}

.title{
  color: transparent;
}

<div class="p1">
  <div class="p2">
    <h1 class="title">Test</h1>
  </div>
</div>

I need the H1 to be pink as the first div. In my project I don't use pink color, but background-image.

Don't think that it will work. I suggest that you read [this](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and use variable and then use that variable to set the background color and the text color of the title — Alon Eitan, Mar 25 '21 at 15:05
There is no problem with the pink color. I used pink as example. I'm using background-image. — pdolezal, Mar 25 '21 at 15:07
Check [this question](https://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background) - There might be useful examples there like [this one](https://stackoverflow.com/a/35107973/754119) — Alon Eitan, Mar 25 '21 at 15:32

score 0 · Answer 1 · answered Mar 25 '21 at 15:38

Here is the answer, apply the background-color/background-image directly to class .title. It works happily showing a stripe of black text, yellow color at mid height of the green block. Enjoy :)

.title{
        color: black;/*transparent;*/
        background-color: yellow; 
        position: relative;
        top: 50%;        
      }

Text with background image from underlayered div

1 Answers1