The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #271561

    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?


    Basically I am trying to position this HTML:

    <a href=""><img src="" 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(;

    (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!


Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.