Jump to content

Custom CSS reverting (background image in header)

Recommended Posts

Site URL: https://kitelineradio.org/

Hi, I found a code snippet for having a background image in the header, which renders fine in the custom CSS view, but when I access the site through the browser or edit any of the individual pages, the image disappears.  How can I make the custom CSS stick?  I tried adding "!important ", but that had no effect. 

header#header {
    background-image: url(https://i.ibb.co/hKwHrNT/washed-out-header-bg-w-opacity.png)!important;
    background-size: cover!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 60px;
}

EDIT: Also, when the custom CSS appears in the preview, there's an odd line wrap in the dropdown nav menu, but when the site renders improperly, without the background image - there's no issue

Edited by JenniferAnderson
Clarification
Link to comment
On 12/22/2020 at 10:02 PM, JenniferAnderson said:

Site URL: https://kitelineradio.org/

Hi, I found a code snippet for having a background image in the header, which renders fine in the custom CSS view, but when I access the site through the browser or edit any of the individual pages, the image disappears.  How can I make the custom CSS stick?  I tried adding "!important ", but that had no effect. 

header#header {
    background-image: url(https://i.ibb.co/hKwHrNT/washed-out-header-bg-w-opacity.png)!important;
    background-size: cover!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 60px;
}

EDIT: Also, when the custom CSS appears in the preview, there's an odd line wrap in the dropdown nav menu, but when the site renders improperly, without the background image - there's no issue

It display well when i added it, did the custom css panel produce any error?

image.png.a2f0ac7642246b349b9a7e0fcf503af1.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.