JenniferAnderson Posted December 22, 2020 Share Posted December 22, 2020 (edited) 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 December 22, 2020 by JenniferAnderson Clarification Beyondspace 1 Link to comment
Beyondspace Posted December 24, 2020 Share Posted December 24, 2020 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
JenniferAnderson Posted December 27, 2020 Author Share Posted December 27, 2020 (edited) @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. Edited December 27, 2020 by JenniferAnderson Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment