Add image background to header

Posted On June 9, 2018

Kodewulf

Web developer and code junkie. Dabbling in just about anything that interests me.

Use the following CCS snippet to add a background image to header behind the menu.

#main-header::after {
    content: "";
    background-image: url('#');
    background-size:cover;
    opacity: 1.0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

More adventures

Javascript sticky header magic

Some sticky header magic.  If a sticky header overlaps some content at the top of the page, this will move page content down a bit.

Google Event Tracking

Google gtag.js event code To be included in HEAD, replacing #### with UA identifier <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-#########-1"></script> <script>...

Share This

Share this post with your friends!