Background-Image Fade out with gradient

Asked by At

I have a container div with a background-image (variable height) and a tile inside it. The backgrund image should always be visible in full width. On small devices it should have a gradient to fade out into white.

How is it possible to achieve such a gradient?

This is my code so far:

.header-with-wide-bg-image {
  width 300px;
}

.header-with-wide-bg-image--tile {
    background: white;
    }
.header-with-wide-bg-image--logo-wrapper {
    margin-bottom: 7rem;
  }
.header-with-wide-bg-image--background:after {
    content: '';
    position: absolute;
    bottom: 0;
    background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
  }

.card {
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(51,51,51,0.4), 0 2px 4px rgba(51,51,51,0.3);
  padding: 1.5rem;
}

.p-y-15 {
  padding: 1.5rem
}
<div class="wrapper-fluid header-with-wide-bg-image">
          <div class="header-with-wide-bg-image--background" style="background-image:url('https://image.freepik.com/free-photo/wide-asphalt-road-with-buildings-horizon_1127-2192.jpg'), linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));;
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-position: left top;">
            <div class="container-fluid wrapper p-y-15">
              <div class="row">
                <div class="col-xs-12">
                  <div class="row">
                    <div class="col-xs-12">
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-xs-12 col-md-6">
                      <div class="card header-with-wide-bg-image--tile">
                        <h1 class="regular-font-family--bold small-h1">Headline</h1>
                        <h4>sdiuhfsuhdfjdf</h4>
                        <div>
                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem sfgdfg doifgjdf odfijgodfg nodfigjdofijg dfgdoifughdfg oidufjhgdfipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

2 Answers

1
Moorthy G On Best Solutions

Move background image to img tag

<div class="header-with-wide-bg-image--background">
    <img src="https://image.freepik.com/free-photo/wide-asphalt-road-with-buildings-horizon_1127-2192.jpg" alt="">
</div>

few CSS updates

.header-with-wide-bg-image {
  width: 300px;
  position: relative;
  overflow: hidden;
}
.header-with-wide-bg-image--background {
  position: absolute;
  width: 100%;
  z-index: -1;
}
.header-with-wide-bg-image--background img {
  width: 100%;
}
.header-with-wide-bg-image--background::after {
  display: block;
  content: '';
  background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  height: 50px;
  margin-top: -50px;
  position: relative;
}

Checkout the fiddle https://jsfiddle.net/moorthyrweb/Lxam8uyk/

0
m.popov On

You can add position relative to the container which holds the background image .header-with-wide-bg-image then add an :after to the same element with the gradient like that:

.header-with-wide-bg-image:after {
  content:'';
  position: absolute;
  bottom:0;
  left:0;
  height: 120px;
  width:100%;
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}

Check out the EXAMPLE