communications@centerpointfl.org

I have successfully used CSS to change the background to an image for  a page that appears in an index. https://www.centerpointfl.org/students 

#summer-nights {
    background-color: #dc877c;
    background-image: url(https://images.squarespace-cdn.com/content/595d0a2f36e5d3ffb4b16e08/2b004caf-fbaa-4b8d-a29d-824b9e348bf1/Gradient+2.png?content-type=image%2Fpng) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  h1 {
	color: #fff !important; 
}

h3 {
	color: #f7c3b6 !important; 
}
  
  h2 {
	color: #fff !important; 
}

p {
	color: #fff !important; 
}
}

The page appears just as I'd like when scrolling through the index and arriving to the page. 

But when I use a direct link to the subpage(/summer-nights), the background image no longer appears. 

I've tried adding this to the Head Injection for the Summer Nights page. That didn't work.

<style>
  .Main {
    background-color: #dc877c; !important;
    background-image: url(https://images.squarespace-cdn.com/content/595d0a2f36e5d3ffb4b16e08/2b004caf-fbaa-4b8d-a29d-824b9e348bf1/Gradient+2.png?content-type=image%2Fpng) !important;
    background-size: cover;
    background-repeat: no-repeat;
  background-position: center;}

  h1 {
	color: #fff !important; 
}

h3 {
	color: #f7c3b6 !important; 
}
  
  h2 {
	color: #fff !important; 
}

p {
	color: #fff !important; 
}
 
  
</style>

Any ideas???

Thank you @tuanphan. Any way you could explain where I went wrong? I am trying to teach myself all of this and I'd love the opportunity to learn for the future. 

Both pages have different structure/class name.