Add clickable transparent image on top of background logo image in header.

[jimbwayne]

Hi. Building a Squarespace site for a client and they requested some header/logo styling that required me to hide the standard templated branding and set the logo as a background image. Problem is, I need that logo to be clickable back to the home page.

The solution that came to mind was to position a blank transparent png over the logo and make that image clickable. I’m sure there is a simple HTML/CSS solution that I am not grasping, but I can’t seem to place my clickable transparent .png OVER the logo image. Instead it is being placed ABOVE the header, creating a white space at the top of the page and pushing everything else down. Can someone chime in with the proper HTML/CSS trickery?

Website: http://snyder-diamond.squarespace.com

Basically I am trying to position this HTML:

<a href="http://designontap.snyderdiamond.com/"><img src="http://jimbwayne.com/wp-content/uploads/2018/05/SDHead.png" width="75%" style="text-align:center"></a>

On top of this CSS, which is the logo set as a background image.

@media screen and (min-width: 1081px){}
.header-announcement-wrapper.responsive-padding--left, .header-announcement-wrapper.responsive-padding--right {
    padding-left: 120px;
    padding-right: 120px;
    padding-top: 4.7%;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 14.75%;
    background-image: url(http://jimbwayne.com/wp-content/uploads/2018/03/SDLogo.jpg);
}

(The above code is currently hidden, so the site looks normal for the time being.)

I know I need to add some “positioning” and/or “z-index” CSS to make this element lay over that logo image, but that’s where I get stuck. Can someone help me out with some trickery?

Thanks in advance!

Jim

[Author]

Posts