CODEWITHSUNDEEP
css
Mario Parra
Mario Parra

Reputation: 1554

Background image gradient not applying

I'm attempting to apply a background image gradient over an image by setting it on its parent div, but it's having no effect, which is strange so I've done this before.

<header id="hero">
  <div id="hero-image">
    <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Hero%20Image&w=1920&h=500" /></a>
  </div>
</header>

header#hero {
  margin: 0 auto;
  width: 100%;
  font-size: 1rem;
}
header#hero #hero-image {
  background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
  display: block;
  width: 100%;
  max-height: 500px;
  object-fit: cover;
}

Demo: http://codepen.io/ourcore/pen/xgqNZJ

Upvotes: 0

Views: 77

Answers (1)

Mario Parra
Mario Parra

Reputation: 1554

I was able to achieve this by applying position: relative and z-index: -1 to #hero-image img:

header#hero {
  margin: 0 auto;
  width: 100%;
  font-size: 1rem;
}
header#hero #hero-image {
  background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
  display: block;
  position: relative;
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  z-index: -1;
}

Upvotes: 1

Related Questions