How can I change the content background color on only one page using CSS?

Does anyone happen to know the CSS to change the content background color (behind the text)? Thank you in advance if anyone has any helpful hints.

Just figured it out on my own with some experimenting for those who want to know:

.collection-[id] #content { background-color: [your color #]; }

Doesn't work for Flatiron :(

Zurask-

What did you type for the code you tried? I can try to piece together where an error might be

.collection-51fe6273e4b018cc005790bd #content{background-color: #ffffff;}

Page: https://suhas-bhat-yrw0.squarespace.com/anna-molly/

Try something else in the space after background-color: instead of #ffffff

For example, I used on my site background-color: rgba(0,0,0,0.7)

If you don't know the color code you want go to the style editor and where you choose font colors pick the color you would use for desired background and find the color's code there.

If that doesn't work do you have other css for backgrounds that may be overriding the new code you put in?

Can't see any overriding new code. Tried different colours but to no avail.

Will give it a shot another day, man. Can't seem to find a solution.

You may have to force a little harder by adding "!important" to that element. It's likely that the BG color is set in the template, which means you need to override it. (like...)

.collection-51fe6273e4b018cc005790bd #content { 
     background-color: #ffffff !important; 
}

Or try dropping #content

.collection-51fe6273e4b018cc005790bd { 
      background-color: #ffffff !important; 
} 

Hey, that doesn't work either. What I have realised, though, is that header code injection doesn't work from the back-end. If I go to the page using the viewer, use Style Mode and then implement CSS via the editor then the changes seem to be implemented.

However, I've only managed to change the background colour for the specific block of text by using:

#block-3d9d13198a3472b9fb32 { 
 background-color: #ffffff; 
 padding: 20px;
}

This still leaves the div container (?) background unchanged, though.

I am also trying to get specific pages to change color on Marquee with no luck. I am using the CSS editor in the style editor, and have tried all variations:

.collection-52c9d299e4b0b674fecf2804 #content { background-color: ##60dca0 !important;

or

.collection-52c9d299e4b0b674fecf2804 { background-color: ##60dca0 !important;

and with and without !important; Perhaps marquee handles the pages differently?Or I'm doing something else wrong?

thanks!!

The best solution I found is to go into the page settings in admin, lick on advanced and enter the blow in the page header code injection:

<style>

#main { background-color: #ffffff; } 

</style>

This will change the background color of only this page.

This works for me on Marquee : to change the background colour of 1 page contained within the index page;

[data-url-id="YOUR PAGE URL HERE"] .content-inner { background-color: #4068b1 !important; }
[data-url-id="YOUR PAGE URL HERE"] .content { background-color: #4068b1 !important; }

The page URL is the suffix to the domain including the forward slash eg /my-page

does this still work? can't seem to get code to work with Marquee ?

@onkelkbh Since this post is specifically asking about background and you are asking about font color, you should consider opening a new question. I am going to remove you answer as this post is almost 3 years old.

Nothing works

Nothing works

@Anderswaltz afirm to @nonesuch's suggestion, for subpages within the index page you need to add css to index>advanced (the index page which is acting as a parent and any code in the index advanced field will flow into the subpages) . Target the subpage using its data-url-id

Example from my site, I am targeting two subpages from within the index page:

<style>
.parallax-item[data-url-id='mission'] div.title-desc-inner h1,
.parallax-item[data-url-id='mission'] div.title-desc-inner p {
  display: none !important;
}
[data-url-id="summary"] h1.page-title, 
[data-url-id="summary"] .page-desc, [data-url-id="summary"] .page-desc a  { 
  color: #333 !important;
}
</style

its really simple .

<style>
 .parallax-item[data-url-id='mission'] div.title-desc-inner h1,
 .parallax-item[data-url-id='mission'] div.title-desc-inner p {
   display: none !important;
 }
[data-url-id="summary"] h1.page-title, 
 [data-url-id="summary"] .page-desc, [data-url-id="summary"]{ 
  background-color: #333 !important;
}
 </style>

Hi there, I would really like a solution to this problem as well, but none of the above seems to work for me. Maybe because I use a different template? I'm using Alex, does anybody have an idea?

My question is also here:https://answers.squarespace.com/questions/150634/alex-template-different-background-color-for-each.html

Hi @Fox, I made a video tutorial for you on how to Change The Content Background Color. Hope this helps! https://www.askquesty.com/post/change-background-color