Archived topic

SVG shape as backgound of logo

5 replies · Started by Annamari on September 21, 2021

Viewing posts 1–6 of 6

September 21, 2021 at 1:16 pm #1938364

Hi,

I'd like to use an SVG shape to be displayed under the logo on my site (except the home page).

I set the header color to transparent and added the following CSS to my child theme's style.css file, but the shape is not visible:

.inside-header {
    position: relative;
}

.inside-header:before {
    content: "";
    position: absolute;
    background: url(https://verzal.kreanilla.hu/wp-content/uploads/2021/09/triangle-cropped.svg);
    background-size: 100% 100%;
    width: 482px;
    height: 274px;
    top: 0;
    left: 10%;
    z-index: -1;
}

.home .inside-header:before {
    display: none;
}

What else should I do to make it display?

Thank you,
Annamari

September 21, 2021 at 1:59 pm #1938403

Hi Annamari,

The CSS seems right, I tested in developers tool and the shape appears:
https://www.screencast.com/t/8evm6OF4BIv6

Does the CSS work if you add it to customizer > additional CSS?

Let me know :)

September 21, 2021 at 2:18 pm #1938418

Hi Ying,

Thanks, it works in the customizer additional CSS. I wouldn't like to use it though... is it possible to make it work in the child theme style.css? What causes this?

Thanks,
Annamari

September 21, 2021 at 2:33 pm #1938439

It should work, I guess there're some errors in the CSS you added previously.

You can use a tool like this to check your CSS:
https://jigsaw.w3.org/css-validator/#validate_by_input

Let me know if this helps :)

September 22, 2021 at 2:47 am #1938835

I checked the code with the validator, no errors. Then tried again, and now it works from the style.css...

Strange. :)

Thanks for your help, Ying!

September 22, 2021 at 10:22 am #1939488

Strange thing happens :P

Glad it's working now!

This archived topic is closed to new replies.

Start building better websites today.