Want to add CSS Striped background to header

Hello! I'm designing a site, https://www.homedesigntransitions.com and I would love a repeating horizontal stripe pattern behind the logo in the entire header area. 

I've found CSS for repeating stripes, but nothing is sticking when I try to change the CSS file in Weebly. 

Any help would be greatly appreciated! 

CSS code:

background-image: repeating-linear-gradient(180deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);

or 

background: linear-gradient( to bottom, #5d9634, #5d9634 50%, #538c2b 50%, #538c2b ); /* The rectangle in which to repeat. It can be fully wide in this case */ background-size: 100% 20px;

725 Views
Message 1 of 3
Report
2 REPLIES 2

@getteklotz

You are pretty much there, it just comes down where to put it. I'm an advocate for putting things in the global header/footer if it is just a simple tweak, especially of this caliber (Settings > SEO). Just wrap what you have in a style tag and you should be good to go:

<style>
#sitename {
background-image: repeating-linear-gradient(180deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);

/* background: linear-gradient( to bottom, #5d9634, #5d9634 50%, #538c2b 50%, #538c2b ); */
}
</style>

The div that contains your logo has an id called "sitename". This should apply the style you want. Let me know how it works out.

712 Views
Message 4 of 3
Report

@getteklotz

Looking at it again now, you could replace "#sitename" with "#header" to cover the entirety of the logo, but you would have to put more spacing between the header section and the "Welcome" button

711 Views
Message 4 of 3
Report