How can I make a background continuous?

Question

As you can see, in the title block, only the upper half has background, I want the whole title block to have the same background. Of course, I can set background for the title block itself, but this way the background won't look continuous, as you can see in the fiddle.

Is there a way to achieve this with pure css?

.header {
  width: 100%;
  padding-top: 30%;
  background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
  background-size: cover;
  position: relative;
}

.title {
  position: absolute;
  transform: translateY(-50%);
  padding: 8px 24px;
  font-size: 24px;
  background: none;
  border-radius: 50px;
  border: 4px solid white;
  left: 10%
}

body {
  background-color: #eee
}

.title.b {
  background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
  background-size: contain
}

<div class="header">
  <div class="title"> Title Title </div>
</div>

<div class="header" style="margin-top:60px">
  <div class="title b">
    Title Title
  </div>
</div>

Fiddle: https://jsfiddle.net/s7pkr2w8/1/

Answer 1

Here is an idea using clipping and masking

.header {
  padding-top: 30%;
  position: relative; /* relative here !! **/
  display:flex;
  z-index:0;
}
.title {
  font-size: 24px;
  color:#fff;
  border-radius: 50px;
  margin:auto auto 0 10%; /* position the element using flexbox instead of absolute */
  -webkit-mask:linear-gradient(#fff 0 0); /* clip the pseudo element to only the title shape*/
}
/* extra div needed for the white border*/
.title > div {
  padding: 8px 24px;
  border:4px solid #fff;
  position:relative;
  border-radius: inherit;
}
/**/
/* two pseudo element relative to the container having the same background
   to have the continuous effect
*/
.title::before,
.header::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%/cover;
}

.header::before {
  clip-path:inset(0 0 20px 0); /* cut 20px from the bottom to be around the middle of the title */
}

body{
  background-color:#eee
}

<div class="header">
  <div class="title">
    <div>Title Title</div>
  </div>
</div>