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

Link to comment
  • Replies 2
  • Views 421
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@bangank36 -- Thanks for your response! I was trying to cover just the header and not the section below.  I ended up creating a small blank section just below the header (and adding the image to that) and that solved the problem.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.