Search code examples
csstransparencybackground-color

css bootstrap card header transparent not inherit parent background colour

Here's the situation, I have a background image for the whole page. The .container div has a white background color. I would like parts of the content (for instance a bootstrap card header) to be transparent and show the background image, therefore the card header not inheriting the container white background. Is this even possible ?

In the following example, I would like the .card-header element to be transparent thefore have the image as background.

<div style='background: url("img/bg.png");background-size: cover;'>
    <div class="container" style="background-color:white">
        <div class="card">
            <div class="card-header">
                <span>header</span> 
            </div>
            <div class="card-body">
                <span>Body</span>   
            </div>  
        </div>
    </div>
</div>

enter image description here

Solution

  • Easiest solution would be to have a static background, which is not tied to the width of an element, then also apply the very same background to the card.

    Example from my comment:

    body,
.bg {
  background: no-repeat url(https://placeimg.com/640/480/nature) fixed 100% 100%;
}

.container {
  border: 1px solid;
  padding: 15px;
  margin: 50px;
}

.card-header,
.card-body {
  height: 200px;
}
    <div class="container" style="background-color:white">
  <div class="card">
    <div class="card-header bg">
      <span>header</span>
    </div>
    <div class="card-body">
      <span>Body</span>
    </div>
  </div>
</div>