CSS is removing colors from all sections instead of just on main section

I am new to squarespace and still on my trial but this is making me rethink my life 😂.

I'm trying to just have my personal banner on every page of my website .  That part is not a problem.  The problem is that some of the sections on my other pages have a "blue" background color in those sections and because of the code, the "blue"  color is gone.  If I remove the transparent, then my banner is gone and the site header is also blue. 

How do I fix it so that the site banner (a) shows my banner (png file), and (b) but doesn't affect the color of the other section pages?

This has been a 3 hour ordeal and I'm worn out.  

.section-border{opacity:transparent!important} 

/* squarespace update in 2023 - not in the video but important */
.section-border{opacity:0!important} 

/* Add the image as a background*/
#page{
background-image:url(https://static1.squarespace.com/static/65d6a74d8df0af2a991fed5f/t/65dc0851cdf23b79ac04a277/1708924240660/daily+mail+manila+%281%29.png);
background-size: cover}

/* Make the page section backgrounds transparent */
#page .page-section {
background: transparent!important
}
#page .page-section .section-background {
background: transparent !important;
}

.header-title {
display: none;
}

8 hours ago, Web_Solutions said:

Replace your code with the code below. Let me know if its work.

#page{
  background-image: url(https://static1.squarespace.com/static/65d6a74d8df0af2a991fed5f/t/65dc0851cdf23b79ac04a277/1708924240660/daily+mail+manila+%281%29.png);
  background-size: cover
}

/* Make the page section backgrounds transparent */
#page .page-section {
  background-color: transparent !important;
}
#page .page-section .section-background {
  background-color: transparent !important;
}

.header-title {
  display: none;
}

 

Thank you for this.  You getting a coffee from MoeCritiqués.  

I was also able to make this work by using the below as well.  Both yours and the below worked.  I so appreciate your time.

.header {

background-image:url('image-url’);

background-repeat:no-repeat;

background-size:cover;

background-position: center;

}