Issue with display of SCSS image with overlay

I have been working on a front-end template using SCSS compiled with web pack. I managed to create a jumbotron with an image and added an overlay that displayed correctly initially. However, when I set the opacity of the overlay to 0.8, none of the elements (the image and the dark overlay) were visible in the browser.

It was all working fine until I changed it to RGBA and adjusted the opacity, after which nothing appeared on the screen.

Here's the SCSS code snippet:

.section {
  // position: relative;

  &-jumbotron {
    height: 40rem;
    background-image: linear-gradient(to right bottom, rgba(var(--color-grey-dark-1), 0.8), rgba(var(--color-grey-dark-5), 0.8)),
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

The variables defined in the root file are:

:root {
  --color-grey-dark-1: #333333;
  --color-grey-dark-5: #222222;
}

Answer №1

:root {
  --color-grey-dark-1: #333333;
  --color-grey-dark-5: #222222;
}

.section {
  &-jumbotron {
    height: 40rem;
    background-image: linear-gradient(to right bottom, var(--color-grey-dark-1), var(--color-grey-dark-5));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

If you prefer using rgba for the colors, you can implement it like so:

:root {
  --color-grey-dark-1: 51, 51, 51;
  --color-grey-dark-5: 34, 34, 34;
}

.section {
  &-jumbotron {
    height: 40rem;
    background-image: linear-gradient(to right bottom, rgba(var(--color-grey-dark-1), 0.5), rgba(var(--color-grey-dark-5)));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

Answer №2

I'm pleased to hear that you've already found a solution that works for you. However, have you considered utilizing the variables provided by SCSS instead of regular CSS variables since you are already using SCSS?

Using SCSS variables can result in cleaner syntax and eliminate the need to be concerned about browser support.

Consider the following example:

(Keep in mind that SCSS variables can be defined anywhere within your code, though it's recommended to keep them in a separate file).

$color-grey-dark-1: rgb(51, 51, 51);
$color-grey-dark-5: rgb(34, 34, 34);

.section {
  &-jumbotron {
    height: 40rem;
    background-image: linear-gradient(to right bottom, rgba($color-grey-dark-1, 0.8), rgba($color-grey-dark-5, 0.8));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

P.S. For further information on this topic, you may find the following link helpful: Use CSS variables with rgba for gradient transparency

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

Animated Gradient Header with CSS

I've been attempting to add an animated gradient to my header class, but so far I haven't been successful. I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference: Can anyone offer some i ...

What is the best way to switch the CSS style of a button that has been mapped

I'm currently working on toggling the CSS class for an individual button that is created from a mapped array. Although my code is functional, it toggles the CSS class for all buttons in the mapped array instead of just the one selected. ...

Generate a new nested div if there is already a different child present at the specified coordinates (x, y)

My goal is to add a textarea to a sidebar on the right whenever a click is made on the page. The current code I have is as follows: $('#page_to_be_clicked').click(function(e){ var offset = $(this).offset(); var comment_box_y_coord = e.pa ...

What is the reason for the additional space and irregular alignment of my divs when utilizing the 960 grid system?

One issue I'm facing is that elements within divs are aligning randomly without responding to any alignment tags. Additionally, some divs are creating extra space above or below their elements. I am using the 960 grid system and have not made any chan ...

Step-by-step guide to making a circular "clip-path" work in both Internet Explorer and Firefox

Can someone help me with circle-masking in different browsers? It's working fine on Chrome. I need to make it work on Firefox and IE as well. Looking for a solution without using radius-border... .circle { -webkit-clip-path: circle(100px at 100p ...

The magic of CSS table manipulation

I'm having trouble with the nth-child selector to control the display of table 2. Specifically, I want to show only rows 11-20 in table 2 but I can't seem to get it right. Any suggestions? Currently, Table 1 is displaying rows 1-10 correctly. Ta ...

Arrange list items in alignment without the need for additional CSS (bootstrap) styling

<div class="card-body p-0"> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between" th:each="extraConfig : ${extraConfigsPage.content}"> ...

Issues have been identified with the performance of Ionic Material List when used in conjunction with ng

In my project involving the Ionic floating menu button, everything is working fine. However, I have encountered an issue where when I click on the + button, I do not want to be able to click on the click me button while the menu is open (Req1.png)https://i ...

What are the ways to create fading text effect on a webpage?

I'm new to this platform and I have a question. I want to create an Anki card that displays a question for a few seconds before fading out. Here is the code snippet I came across: @-webkit-keyframes fadeIn { 100%,0%{opacity:.5;} 0%,0%{opacity:1;} } . ...

Unable to set a specific position for adding a new option in a dropdown menu

I have implemented a semantic UI dropdown using the code below: $('.ui.dropdown') .dropdown() ; <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <l ...

How can I design a horizontal navigation bar using only CSS and CSS tables?

As a newcomer, I am attempting to create the navigation bar that I described. I came across a tutorial at . However, it uses SCSS which I am not familiar with, rather than pure CSS. Here is my code - http://codepen.io/rsing4dev/pen/LNqvVN <p>Please ...

What is the process for specifying a specific font family in CSS?

Despite setting my text to font-family: Times New Roman, I'm seeing a different font in my Chrome browser. Here is the relevant HTML code: <p style="color:#F17141;font-size: 120px; font-family: &quot;Times New Roman&quot; ; font-weight: b ...

activate hover interactions across multiple layers of elements

On my webpage, I have a grid of hidden images that fade in when the mouse hovers over them. The code for this functionality is as follows: HTML <img class="Image" src="./img/foo.png"> CSS .Image { opacity: 0; } JS $(".CircleImage").hover( funct ...

Tips for Preventing Ant Design from Overriding Existing CSS Styles

Currently, I am working on a ReactJS project. Initially, the entire project was designed using pure CSS. However, I decided to incorporate a small Antd component into my project. Following the provided instructions, I imported the component like this in on ...

Challenges with organizing content using spans in Bootstrap 3

Looking for some help with TB3 here. I've created a jsFiddle to showcase my attempt at building a small minitron, which is essentially a mini jumbotron. https://i.sstatic.net/VxruB.png The idea is to have each 'minitron' contained within a ...

How to perfectly center a text box in HTML

UPDATE: I have included the relevant JavaScript code. Essentially, a text box appears when a checkbox is clicked, but I want the text box to be centered on the page. I am attempting to center align a text box on the page, but I am struggling to achieve th ...

Centered Alignment for Bootstrap Carousel Captions

I'm attempting to make a simple change here. Rather than having the Bootstrap Carousel Captions automatically align at the bottom of the Carousel, I would like them to align at the top by default. Any suggestions on how I can achieve this? ...

Inconsistent heights of inline lists compared to wrapped text

Hey there! I'm having an issue with my inline list when the text in the anchor wraps onto a new line. I tried using line-height: 0;, but it's causing some problems with the text display. Any suggestions on how to keep everything on the same line? ...

The CSS :not selector does not work as intended

My goal is to assign the class no-color to a specific tag. When JavaScript is enabled, I want this class to be removed and the text to be colorized. However, my current CSS solution is not working as expected. Below is a sample code snippet demonstrating t ...

Instructions on creating a number increment animation resembling Twitter's post engagement counter

I've been attempting to replicate the animation seen on Twitter's post like counter (the flipping numbers effect that happens when you like a post). Despite my best efforts, I can't seem to make it work. Here is what I have tried: $(fun ...