Archived topic
Header
3 replies · Started by Rob on December 13, 2018
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.
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 :)
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.
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.
