Jump to content

Adding a Logo Image Within Banner - Bedford Template

Recommended Posts

  • Replies 3
  • Views 667
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;
}

image.thumb.png.8ea65d335f67d968770ba3caea9fd9ed.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.