Gray overlay on header background in default casper theme

Developer help
1

HOW DO I CHANGE/GET RID OF THIS ANNOYING GRAY OVERLAY ON MY HEADER BACKGROUND IMAGE IN THE DEFAULT CASPER THEME? I’ve tried to change the css files without success, looked online for answers, but nothing came up… The shading/gray overlay crap is messing up the colors in my background image so I was hoping someone might know how to fix it with a code injection???

Thank you guys!
-Amanda-

2

Hi @EcOz :wave:

Can you share your blog url? That way someone can look at your site and share exactly what css you need to use to fix the issue, since every blog uses Casper a littl bit differently :slight_smile:

3

Thank you, yes my url is www.SaberShores.com

4

Try adding this to the header code injection:

<style>
.site-header:before {
  background: initial !important;
}
</style>
1 Like
5

THANK YOU SOOOOO MUCH!!! :D

1 Like
6

Thank you again!!! My version of casper is out of date, will the fix work when I update the theme to the newest version?

7

Yep! When Ghost 4.0 (the next major) is released, you might want to check that everything looks correct, because there might be some design changes to Casper.

Since you’re using Code Injection, your changes usually take precedence to Casper’s styles

8

I just upgraded it to a version 3 something from a version 2 something casper, and it didnt work on the newer version :confused:

9

Try this:

<style>
.site-header-background:before {
  background: initial !important;
}
</style>

Note that there is also a partially-black gradient at the very top that’s supposed to make the navigation easier to read

10

Thank you much!!! Worked! :slight_smile:

1 Like