How do I remove linear-gradient from the header image
-
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)
-
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; } -
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.
-
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; } -
-
- The topic ‘How do I remove linear-gradient from the header image’ is closed to new replies.