"Implementing a responsive design with a background image and radial gradient - how to

The image currently in use:

https://i.stack.imgur.com/piK6l.jpg

Here is how I've implemented it using Vue.js, Bootstrap, and CSS:

Code Snippet

<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 Styling

.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%;
  }
}

I have utilized a creative workaround by incorporating a gradient overlay on a regular image tag for the desired effect. However, I believe leveraging radial gradients might be more suitable to achieve the fading black corners effect present in the image I'm working with. My attempts at radial gradients haven't yielded satisfactory results yet. With the current CSS approach, I've managed decent outcomes but not quite hitting the mark.

The page's background color is #151515, and I am aiming to create a gradient that fades towards the left side of the image.

If you have any insights or suggestions on improving this implementation, I would greatly appreciate your input. Thank you!

Answer №1

Utilizing CSS background-image, you have the ability to assign multiple layers to a single element in descending order of z-index. Simply separate the layers with commas, one for the gradient and another for the image:

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

In the example provided, both the image and radial gradient are positioned towards the right side, achieved by using another comma-separated list for the background-position:

background-position: 200px, 200px;

This will result in an empty space that can be filled with a grey color; hence specify the background-color for that specific area:

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

Below is a demonstration:

#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.stack.imgur.com/piK6l.jpg);
  background-position: 200px, 200px;
  background-repeat: no-repeat;
  background-size: cover;  
}
<div id="app">
  <div class="bg">My Content</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for vertically centering an image in a Bootstrap card that has a fixed height

Is there a way to center an image vertically in a fixed height bootstrap card? I've experimented with the mx-auto and justify-content-center classes, but haven't had any success. Here is the code on Codeply: <div class="card mx-auto mb-2" ...

What would be more efficient for designing a webpage - static HTML or static DOM Javascript?

My burning question of the day is: which loads faster, a web page designed from static html like this: <html> <head> <title>Web page</title> </head> <body> <p>Hi community</p> </bo ...

Change the position of buttons inside a Bootstrap 4 modal to the left side

I am currently working with a modal in bootstrap 4 and I would like to reposition the 'cancel' and return buttons to the left side of the modal. I have set up a js fiddle for reference: https://jsfiddle.net/andrewsolis/08v6znox/. Below is my HTML ...

Determine the Height of the Container once the Font File has Finished Loading

When styling a website with a unique font using @font-face, the browser must download the font file before it can display the text correctly, similar to how it downloads CSS and JavaScript files. This poses an issue in Chrome (v16.0.912.63) and Safari (v5 ...

Encountering [Object Object] within an angular2 app

https://i.stack.imgur.com/iceKH.pngI recently created an angular2 application using ngrx/effects for handling http calls. My reference point was an application on GitHub. However, I am facing an issue where the response from the HTTP call is not displaying ...

Words next to picture

Can someone help me with aligning different images of varying widths but the same height inline with text next to each image? I tried to do it, but it doesn't look good on responsive screens. Any suggestions on how to fix this? And if there's a b ...

Transform one column into several columns

I am working with a function that populates a table row by row. Here is the code: function renderListSelecoes(data) { // JAX-RS serializes an empty list as null, and a 'collection of one' as an object (not an 'array of one') va ...

What is the best way to align text with my CSS number and circle on the same line?

Here are two questions for you: First off, I've successfully created a circle with a number inside it using CSS. How can I go about filling the circle with color? Secondly, I'd like to know how I can align the words "Opportunity #1" on the same ...

Extracting URL from HTML automatically

I'm in the tedious process of copying multiple URLs from a website, which involves clicking on numerous links and then pasting the URL (along with other information) into an Excel file. This method is incredibly time-consuming, especially since I have ...

Utilize the HTML img tag in conjunction with AngularJS and Ionic to showcase dynamic images

Currently, I am working on a hybrid mobile app using ionic and Angularjs. I am facing an issue with displaying images through the img html tag in my app. The main layout of my page includes a carousel at the top that displays images and a list containing s ...

Issue encountered with @Nuxt.js/Cloudinary plugin for Media Enhancement: "Access to this endpoint is restricted due to insufficient permissions"

I am currently utilizing the @nuxtjs/cloudinary module based on the module guide and a course video. However, I am encountering an error in the response as follows: Status 403, message: You don't have sufficient permissions to access this endpoint&qu ...

Simple linking inside a Div container

I'm working on a div that has the following markup: <div class="col-sm-12"> <p class="bg-info">Basic Information</p> </div> Here's how it currently looks: I want to add an 'Add /Edit' link to t ...

Unable to interact with the submit button using Selenium

Hey there! I'm facing a bit of an issue with logging into using Selenium. I was able to successfully log in using the POST request method in BeautifulSoup, but now I need to switch to Selenium because I need to click on a button after login, which is ...

When I attempt to incorporate multiple sliders on a single page, I encounter difficulties in determining the accurate stopping position if the number of slides varies

I am having trouble setting the correct stop position for sliders with different numbers of slides on a page. When I have the same number of slides in each slider, everything works fine. However, I need to have a different number of slides in each slider ...

In Vue firebase, ensure that the prop is only passed down after it has been

I am facing an issue where I need to pass down the Firebase user as a prop from the root component to my child components. I managed to achieve this by passing the user to my router. However, the problem arises when I wrap my new Vue instance in an onAuthS ...

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...

Utilizing encoding and decoding techniques in PHP and JavaScript with robust data attribute validation

I am utilizing data attributes to transfer information from HTML to JavaScript. The data attributes are derived from MySQL data, so they may contain spaces, resulting in validation errors since spaces are not permitted within attributes. My proposed solut ...

Tips for displaying an arrow icon that points up or down when clicking on a table header in Vue.js

I am currently working on a listing page where data is fetched using Laravel. The issue I am facing is related to sorting functionality when clicking on the table headings (<th>). The desired behavior is for arrow marks to indicate ascending or desce ...

Securing your Socket.IO connection with an httpOnly cookie verification

Hello there, I have a query that's been on my mind. In my setup, I'm using NestJS for the backend and VueJS for the frontend. My goal is to update the frontend when the backend finishes a lengthy operation. To achieve this, I believe utilizing so ...

Toggle between a list view and grid view for viewing photos in a gallery with a

Hey there, I'm a newbie on this site and still getting the hang of jQuery and JavaScript. Though I do have a good grasp on HTML and CSS. Currently, I'm working on a photo gallery webpage as part of my school project using the Shadowbox plugin. Wh ...