[SitegemzParticipant]

I’m trying to add a linear gradient to my revolution slider images as well as the header on each page so the text stands out. The CSS I was trying isn’t working and I’m not sure why. Here’s what I was using for entrisionproject.com

.header {
background:
linear-gradient(
rgba(0,0,0,0.6),
rgba(0,0,0,0.4) 17%,
rgba(0,0,0,0) 30%,
rgba(0,0,0,0) 60%,
rgba(0,0,0,0.5) 75%,
rgba(0,0,0,0.8)
), image-url(“header3_mobile.png”) no-repeat center left;
background-size: cover;
height: 300px;
@media(min-width: 768px) {
background:
linear-gradient(
rgba(0,0,0,0.6),
rgba(0,0,0,0.4) 30%,
rgba(0,0,0,0) 42%,
rgba(0,0,0,0) 63%,
rgba(0,0,0,0.6) 76%,
rgba(0,0,0,0.8)
), image-url(“header3_desktop.png”) no-repeat center left;
height: 344px;
}
}

[Rue NelModerator]

Hello There,

Thanks for writing in! Please always make sure to supply the direct path of your image. Instead of just having "header3_desktop.png", you’ll need to have something like "http://path/to/the/file/header3_desktop.png". And by the way, your code is invalid. Please use this instead:

.header { 
  background:
    linear-gradient(
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.4) 17%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.5) 75%,
    rgba(0,0,0,0.8)
    ), image-url("header3_mobile.png") no-repeat center left;
  background-size: cover;
  height: 300px;
}

@media(min-width: 768px) {
 .header {
   background:
    linear-gradient(
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.4) 30%,
    rgba(0,0,0,0) 42%,
    rgba(0,0,0,0) 63%,
    rgba(0,0,0,0.6) 76%,
    rgba(0,0,0,0.8)
    ), image-url("header3_desktop.png") no-repeat center left;
  height: 344px;
 }
}

Hope this helps. Please let us know how it goes.

[SitegemzParticipant]

This worked on the header for the pages but not the home page revolution slider. Do I need to add it to the css of the slider?

[DarshanaModerator]

Hi there,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[SitegemzParticipant]

Entrisionproject.com

[Rue NelModerator]

Hello There,

Thanks for providing the url of your site. If you want to add the gradient in your slider at the home page, you will need this code:

.x-slider-container:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  background:
    linear-gradient(
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.4) 17%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.5) 75%,
    rgba(0,0,0,0.8)
    ), image-url("header3_mobile.png") no-repeat center left;
  background-size: cover;
  z-index: 16000;
}

@media(min-width: 768px) {
 .x-slider-container:after {
   background-color: rgba(0,0,0,0.6);
   background:
    linear-gradient(
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.4) 30%,
    rgba(0,0,0,0) 42%,
    rgba(0,0,0,0) 63%,
    rgba(0,0,0,0.6) 76%,
    rgba(0,0,0,0.8)
    ), image-url("header3_desktop.png") no-repeat center left;

 }
}

Please keep in mind that some browsers doesn’t display the gradients.

Hope this helps.

[SitegemzParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

I have placed the code suggested previously and it seems to work fine. Kindly check now.

Thank you.

[SitegemzParticipant]

Hi Jade I checked & it added a mask over the entire slider which hides the box as well as the buttons inside. Also the buttons don’t work now. The gradient itself was supposed to look like the attached document without hindering the links in the box. Should I add CSS to Revolution slider as opposed to the customizer?

[SitegemzParticipant]

here are screenshots

[LelyModerator]

Hi There,

Please check this suggestions instead:https://www.themepunch.com/faq/extend-image-overlay/

Hope this helps.

[SitegemzParticipant]

I’m trying to add the same gradient to my page headers. I added the CSS to Customizer>custom CSS & wondering if I got a call wrong or something here’s the CSS I’m using to try to accomplish this:
.x-section-1 {
background: linear-gradient(
rgba(0,0,0,.6),
rgba(0,0,0,.4) 30%,
rgba(0,0,0,0) 42%,
rgba(0,0,0,0) 63%,
rgba(0,0,0,.6) 82%,
rgba(0,0,0,.7)
) url(http://entrisionproject.com/wp-content/uploads/2016/09/header3_desktop-1.png) !important
}

for the life of me I can’t figure out what I’m doing wrong because it works in the google inspector. Here’s the URL of one of the pages I’m trying to get it to work on. http://entrisionproject.com/sustainability-statement/
The attached image is an example of the gradient I’m going for. Thanks for the awesome support

[FriechModerator]

Hi There,

Your code does work, try to clear your browser’s cache.

http://prnt.sc/cku45b

Thank you.

[SitegemzParticipant]

Sorry I meant to update this thread yesterday. I did in fact get it to work but now the pics won’t scroll. On that issue I’m out of ideas. Got any? Thanks for your time and all you do.

[RadModerator]

Hi there,

What do you mean by it doesn’t scroll? Is it the parallax effect? You may enable your section’s parallax if you need to 🙂

Cheers!

[Author]

Posts