Background image and radial gradient on responsive element?

Question

This is the image being used:

This is my implementation using Vue.js, Bootstrap and CSS:

Template

<div class="landing">
  <div class="container text-white details h-100">
    <div class="row h-100">
      <div class="col-12 col-md-7 my-auto">
        <h1 class="text-left mb-0 font-weight-900 font-48">
          About the Alien Zoo experience
        </h1>
        <p class="text-left mb-0 font-16">
          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
        </p>
        <CustomButton
          class="d-block"
          buttonText="Next"
          @click.native="onButtonClick()"
          ></CustomButton>
      </div>
    </div>
  </div>
  <div class="row hero-image">
    <img class="background" src="../assets/images/Alien.png" alt="" />
  </div>
</div>

SCSS

.landing {
  position: relative;
  height: 100vh; // background-color: #151515;
  overflow-x: hidden;
  .hero-image {
    position: relative;
    left: 28%;
    width: 100%;
    size: cover;
  }
  .hero-image:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30vh;
    height: 100vh;
    background: linear-gradient( 93deg, rgba(21, 21, 21, 1) 10%, rgba(0, 0, 0, 0) 50%);
    /* W3C */
  }
  p {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .details {
    position: absolute;
    z-index: 2;
    padding-left: 12%;
  }
  .background {
    display: block;
    height: 100vh;
    width: 100vw;
  }
}
.mobile-alien {
  display: none;
}
@media only screen and (max-width: 768px) {
  .landing {
    display: none;
  }
  .mobile-alien {
    display: block;
  }
}
@media only screen and (min-width: 1900px) {
  .landing .details {
    right: 50%;
  }
}

My workaround for this is making the background image a normal image tag and using :after on the image tag for the gradient. Using absolute and relative it stays responsive as well, but I don't think this is the right way to go.

The image itself that I am using doesn't have any gradient to it. So I applied linear gradient using css. But I think I have to use radial gradient here, as the corners of the images are supposed to fade to black too (this kind of black #151515). I don't have any experience with gradients, whatever I tried out using radial didn't work. Using the css above, I have been able to achieve to a decent extent, but it doesn't look like its in the sweet spot.

The background color of the page is #151515 and as you can see, I have to fade it to the left using gradient.

Any help would be appreciated. Thank you.

Answer 1

With CSS background-image, you can specify multiple layers on a single element in descending z-index. Use a comma to separate layers, one for the gradient and one for the image:

.bg {
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0) 25%, rgba(24, 24, 24, 1) 75%),
    url(https://i.sstatic.net/piK6l.jpg);
}

In your example, both the image and radial gradient are pushed to the right, which you can do with another comma-separated list for the background-position:

background-position: 200px, 200px;

That will leave a blank space that you want grey, so specify background-color for that space:

background-color: rgba(24, 24, 24, 1);

Here's a demo:

#app {
  width: 100%;
  height: 400px;
  color: white;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: rgba(24, 24, 24, 1);
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0) 25%, rgba(24, 24, 24, 1) 75%),
    url(https://i.sstatic.net/piK6l.jpg);
  background-position: 200px, 200px;
  background-repeat: no-repeat;
  background-size: cover;  
}

<div id="app">
  <div class="bg">My Content</div>
</div>