How do I remove linear-gradient from the header image

kkernutt · Member · Dec 22, 2016 at 12:11 am
Copy link

Add topic to favorites
Hi,

I am using the gateway theme and I want to remove the linear-gradient from the head image on the home page. This is the current code.

.header-bg {
background-image: linear-gradient( rgba(0,0,0,0.01), rgba(0,0,0,0.6) ), url(https://overflowhr.files.wordpress.com/2016/12/sunset-light.jpg?w=2362&h=1575&crop=1);
}

This has been suggested as a way of doing this however it then changes the background image on all the pages and I only want the linear-gradient removed from the home page image.

.header-bg {
background-image: url(‘https://overflowhr.files.wordpress.com/2016/12/sunset-light.jpg?w=2362&h=1575&crop=1’);
}

Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 22, 2016 at 2:13 am
Copy link
Hi, since that gradient is set in a CSS file that has a high priority, we need to force the change by using the !important keyword at the end, like this.
```
.header-bg {
    background-image: url('https://overflowhr.files.wordpress.com/2016/12/sunset-light.jpg?w=2362&h=1575&crop=1') !important;
}
```
kkernutt · Member · Dec 22, 2016 at 2:15 am
Copy link
Yes, my mistake(This should have been included above), however it still doesn’t fix the issue of it effecting all the headers on the website. What I need is some code that will target just the home page header.
thesacredpath · Member · Dec 22, 2016 at 3:00 am
Copy link
Ah, sorry. We can use the “home” CSS class that is defined in the opening body HTML tag on your home page to target just the home page like this.
```
.home .header-bg {
    background-image: url('https://overflowhr.files.wordpress.com/2016/12/sunset-light.jpg?w=2362&h=1575&crop=1') !important;
}
```
kkernutt · Member · Dec 22, 2016 at 3:02 am
Copy link
That works. Thank you.
thesacredpath · Member · Dec 22, 2016 at 3:18 am
Copy link
Hooray and you are welcome!

No items found.