CODEWITHSUNDEEP
htmlcssopacity
WNM Derek
WNM Derek

Reputation: 55

opacity background with no opacity text

I am trying to make a div that is as wide as the screen but has a slightly dimmed out background image, but it is making any over laid text dimmed out also. How can this be changed so only the background image is dimmed and not any overlaid text please?

.venue-header-text {
  font-size: 3.5em!important;
  font-weight: 700!important;
  color: white!important;
}

.inner-slider .slide {
  padding: 100px 0 100px;
  position: relative;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: white!important;
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6)!important;
}
<div class="text-center">
  <section class="inner-slider hyr-section-height-override">
    <div class="slide" style="background-image:url('/site-data/articles/venue1/header.jpg');">
      <div class="container">
        <h2 class="venue-header-text">VENUE 1</h2>
      </div>
      <div class="slide-overlay"></div>
    </div>
  </section>
</div>

Upvotes: 1

Views: 154

Answers (1)

Johannes
Johannes

Reputation: 67748

Put the text into the .overlay element. Its background color will have opacity, but the text won't:

.venue-header-text{
    font-size:3.5em!important;
    font-weight:700!important;
    color:white!important;
}
.inner-slider .slide {
    padding: 100px 0 100px;
    position: relative;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color:white!important;
}

.slide-overlay {
    position: absolute;
     top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6)!important;
}
<div class="text-center">
<section class="inner-slider hyr-section-height-override">
<div class="slide" style="background-image:url('https://lorempixel.com/output/technics-q-c-640-480-2.jpg');">
<div class="container">

</div>
<div class="slide-overlay"><h2 class="venue-header-text">VENUE 1</h2></div>
</div>
</section>
</div>

Upvotes: 1

Related Questions