Search code examples
htmlcsssvgtransparency

Div with svg background image

I have a div inside a div. And the second one has .svg image as a background and it is transparent, so I can see text that is written on my first div background. I don't want it to be like that and I am not sure what I need to change to remove that transparency. Please help. Thanks.

Solution

  • You can define background-color property on div 2:

    background-color:#fff;

    Source

    .img {
  background-image: url('http://www.stupidedia.org/images/a/a3/Gangsta-balz-transparent.svg');
  width: 640px;
  height: 427px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: #fff;
}

h1 {
  white-space: nowrap;
}
    <div>
  <h1>Some text Some text Some text Some text Some text</h1>
  <div class="img">
  </div>
</div>