SCSS image with overlay not displaying

Question

I am building a front-end template with SCSS being compiled with web pack. I created a jumbotron that has an image and gave it an overlay which displays properly, but upon giving an overlay an opacity of 0.8, none of the elements (the image and the dark overlay) displays on the browser.

Note: the code works until I made it an RGBA and added opacity, then it stopped displaying

the SCSS code below:

.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 are written in the root folder is:

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

Your variables are in hex but you are passing them to the linear gradient as rgba. Do you need to convert them first? — ksav, Nov 05 '18 at 21:12
@ksav I did that and still getting the same result, and i also think that the former method was also correct as it was the same method used in the tutorial i am following — Opeyemi Odedeyi, Nov 05 '18 at 21:21

ksav · Accepted Answer · 2018-11-05T21:33:55.403

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

Or if the colors need to be rgba you can do like this:

: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;
  }
}

edited Nov 05 '18 at 21:33

answered Nov 05 '18 at 21:22

ksav

20,015
6
46
66

1

yeah this works, but when I try to add opacity using RGBA to the color, then it breaks – Opeyemi Odedeyi Nov 05 '18 at 21:32
Edited to provide rgba option – ksav Nov 05 '18 at 21:38

score 1 · Answer 2 · answered Nov 05 '18 at 21:59

I am glad that you have already received an answer that works, but I have to ask: since you are already using SCSS, why not using the variables it provides instead of regular CSS variables?

The syntax is a little bit cleaner and you wouldn't have to worry about browser support.

example:

(Note that you can define SCSS variables wherever you want. Although, it would be preferable to have 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. Some additional reading related to your question: Use CSS variables with rgba for gradient transparency

Thanks a lot for the contribution. I use a different folder for my variables. — Opeyemi Odedeyi, Nov 05 '18 at 22:03
Great! Glad it helped. Two more quick hints: 1. it's perfectly fine to write RGBA with 0 (zero) omitted - it's just a matter of style preference. `rgba($some-color, .3)` 2. whenever possible, avoid saying the color in the name of the variable. Instead of `$color-red` you can use `$color-warning`. Those weren't originally in your question but I hope they can help as well :) Cheers — nemanja, Nov 05 '18 at 22:08

SCSS image with overlay not displaying

2 Answers2