Home Forums Support Header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #755590
    Rob

    Hi there

    I wonder if you can help.

    Im trying to replicate this website, see the latter URL sent.

    Notice the header, behind the logo. There is a PNG “slant”.

    Im trying to replicate this on my new site, but cant seem to add it to the correct “before” tag.

    Can you help, if I had it to the site.logo before, it shows up in front of the logo.

    #755685
    Leo
    Staff
    Customer Support

    Hi there,

    I’m not quite sure what you mean.

    There isn’t anything behind the logo in the link provided:
    http://truckpartsne.co.uk.gridhosted.co.uk/wp-content/uploads/2018/12/truckPartLogo.png

    Let me know if I’m missing something 🙂

    #755701
    Rob

    Sorry,

    If you go to https://www.truckpartsne.co.uk

    Behind the logo, there is the slanted PNG file. The lighter grey image that sits behind the logo,

    Im trying to recreate this on the other URL i sent you, but the image sits “infront” of the logo.

    Im trying to add the CSS to “::behind” on the “site logo” div.

    #755872
    Tom
    Lead Developer
    Lead Developer

    You could try something like this:

    .site-logo {
        position: relative;
    }
    
    .site-logo:before {
        content: "";
        position: absolute;
        top: 0;
        left: -84px;
        width: 420px;
        height: 152px;
        background: url(URL TO IMAGE) 0 0 no-repeat;
        background-size: cover;
        z-index: 1;
    }
    
    .site-logo img {
        position: relative;
        z-index: 2;
    }

    You’ll need to adjust the positioning/size of the slant.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.