A background image with a different opacity than the text

1

I am trying to insert a background image in a row with two elements inside: The left elements is a image the right element is a text.
The issue I am having is that the text can not be seen unless the opacity is reduced for the background image. If I reduce the opacity of the background image the entire row has its’ reduced as well.

the is as follows:

<div class="row img-responsive header">
    <div class="col-xs-12 col-sm-4">
      <img >
      </img>
    </div>
    <div class="col-xs-12 col-sm-8">
     <h1></h1>
    </div>
  </div>

class header contains the background image commands in CSS.

thank you in advance,

Brian

2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Note that <img> is self-closing; you don’t need the </img>.

img-responsive is not meant to be used by a <div>.

You might want to include a codepen link, if there’s one.

1 Like
3

opacity on images and elements apply to all child elements. There’s no way to prevent that.

Achieving what you’re describing would require a CSS hack where you position your text/image outside the row (say, in a row under it) and apply positioning properties to it like { top: -20px; }

Here is a more detailed explination.

This is almost never the right way to build a page, however. I’d recommend reconsidering the need for opacity (use a .png with opacity or something.)