Adding a Logo Image Within Banner - Bedford Template

Site URL: https://www.carolinaforest.org/

Hello,

I would greatly appreciate help in adding logo images (i.e. transparent bg PNG's) on top of my page banners. The default mode in the Bedford template allows for only text to be added over the banner image (when typed into the "Page Description" box).

Thanks for any direction you can provide!

-Justin

On 2/5/2022 at 3:08 AM, justinmichal said:

Site URL: https://www.carolinaforest.org/

Hello,

I would greatly appreciate help in adding logo images (i.e. transparent bg PNG's) on top of my page banners. The default mode in the Bedford template allows for only text to be added over the banner image (when typed into the "Page Description" box).

Thanks for any direction you can provide!

-Justin

Add to Design > Custom CSS

body.homepage .desc-wrapper:before {
    display: block;
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/01/31/12/46/bird-6983434__480.jpg);
    width: 100px;
    height: 50px;
    background-position: center center;
    text-align: center;
    margin: 0 auto;
}

Can you also show me how to add it to pages besides by homepage? Here's one page where I would like to add an image over the banner image.

https://www.carolinaforest.org/kingdom

Thanks so much!

On 2/8/2022 at 6:32 AM, justinmichal said:

Can you also show me how to add it to pages besides by homepage? Here's one page where I would like to add an image over the banner image.

https://www.carolinaforest.org/kingdom

Thanks so much!

Edit Kindom page >> Add a Code Block (anywhere) >> Use this code

<style>
  .desc-wrapper:before {
    display: block;
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/01/31/12/46/bird-6983434__480.jpg);
    width: 100px;
    height: 50px;
    background-position: center center;
    text-align: center;
    margin: 0 auto;
}
</style>