[Resolved] Header

[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.

[Leo]

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 🙂

[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.

[Tom]

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.

[Author]

Posts