Jump to content

Change background for one event sub-page

Recommended Posts

Hello I am looking to change the color and background for one event subpage. I would like to replace the background with an image, and have it only apply to one event in particular.

I have been trying this but it is not functioning currently. If it does it seems it will apply to the events page in general either way.

section[data-section-id="64e28a2f47825a188085e871"] .section-background {
    background-image: url(/s/Friction-Presents-Background.png) !important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    background-color: transparent!important;
}

 

Link to comment
  • Replies 5
  • Views 2.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@Lesum Yes I have uploaded the background image on Squarespace. I realized I had the code commented out since it wasn't working. I have re-enacted the code. Unfortunately there are two problems.

The background change shows up on the preview screen when editing the website but is not reflected when actually visiting the site. Additionally on the edit preview screen this changes the background for the events page as well since it seems they share a section ID. Is there a way to change ONLY the specific event subpage?

Thanks!

Link to comment
  • 3 months later...

@OtisH You need to change your code from this

section[data-section-id="64e28a2f47825a188085e871"] {
    background-image: url(https://frictionquartet.com/s/Friction-Presents-Background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent !important
}

to this

section[data-section-id="64e28a2f47825a188085e871"] {
    background-image: url(https://frictionquartet.com/s/Friction-Presents-Background.png);
    background-size: cover;
    background-repeat: no-repeat;
}
section[data-section-id="64e28a2f47825a188085e871"] .section-border, section[data-section-id="64e28a2f47825a188085e871"] .section-background {
    background-color: transparent !important;
}

image.thumb.png.0bcdb0fafeabe0204af5d204f1d83ca5.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

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.