Changing the background color of a section-Avenue

Site URL: https://www.allegragonzalezabreu.com/designwork#/catena/

I want to change the background color of the top part of this page included in the screenshot. I am unable to add a section to my page so I can't figure out how to do this. I want the background of the rest of this page to be white but only this top part to be a different color. 

Add to Home > Design > Custom CSS

.project[data-url="/catena/"] {
    background: red;
}

Thanks for answering! What If I don't want to change the whole background color, only a part of the page?

You'll need custom code for this...Paste this into the header code injection area of that page only. Hopefully this will work. Nice use of Avenue by the way. My site is built on the same template.

<style>
#header {background-color: #111 !important;}
#header a {color: #fff !important;}
</style>

Make your color here, use the #number and replace the #fff in the above code. 

https://www.rapidtables.com/web/color/html-color-codes.html

my random views derrick Lee parker

5 hours ago, allegra said:

Thanks for answering! What If I don't want to change the whole background color, only a part of the page?

The code I sent, change only section in your screenshot

23 hours ago, derricksrandomviews said:

 

You'll need custom code for this...Paste this into the header code injection area of that page only. Hopefully this will work. Nice use of Avenue by the way. My site is built on the same template.

<style>
#header {background-color: #111 !important;}
#header a {color: #fff !important;}
</style>

 

Make your color here, use the #number and replace the #fff in the above code. 

https://www.rapidtables.com/web/color/html-color-codes.html

my random views derrick Lee parker

Thank you! For some reason it says there is a syntax error on line 1.  I pasted it to the custom CSS but I'm not sure what you mean by the header code injection. Will this work if I am unable to create sections on my page? I've attached screenshots. 

20 hours ago, tuanphan said:

The code I sent, change only section in your screenshot

What If I am unable to add sections? I don't know how since I only see the option to add a page, not a section 

You don't put the code in custom css the style command will cause a syntax error, You put it in the advanced code injection of the specific page you want to change. Go to that  page in config, click the settings gear icon, and then advanced, you will then see page header code injection. 

1 hour ago, derricksrandomviews said:

You don't put the code in custom css the style command will cause a syntax error, You put it in the advanced code injection of the specific page you want to change. Go to that  page in config, click the settings gear icon, and then advanced, you will then see page header code injection. 

Oh right! Thank you, but I actually want to change the color of the top of the page, not the header! As you can see in this screenshot I changed the header background color to a dark grey, but I want to change the top of the page with the large text that I've highlighted in red! Thanks for being so responsive!

Is this text in its own block? I would assume that to be the case. Here is a way to do this, without code. 

https://paigebrunton.com/blog/squarespace-change-background-color

@derricksrandomviews I've been trying that blogs' instructions but unfortunately it hasn't worked for me! Creating a new page and adding an image to be the banner doesn't make it show up on the page. I also don't if its the Template, but on Avenue I haven't been able to add sections to pages which I know would be another route. Are you able to add sections to pages?

Blank pages I can add text blocks, gallerys, and images. These are blocks that I layout, not exactly sections, if that is what you are asking. There are layout pages too, which have blocks on them already.  Looks like you want to change the background color for a text block, that is not a simple thing to do, but here is how you do it:

https://bigcatcreative.com/blog/background-text-block-squarespace