MoeTalks Posted February 26 Share Posted February 26 (edited) 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; } Edited February 26 by MoeCritiques spelling error Link to comment
Solution Web_Solutions Posted February 26 Solution Share Posted February 26 27 minutes ago, MoeCritiques said: 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; } 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; }  If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks MD Rofik Website Designer and Digital Marketer ☕Am I helpful? Want to offer me a coffee? ✉ Send me a message if needed any help. I'll try to reply as soon as possible.  Link to comment
MoeTalks Posted February 26 Author Share Posted February 26 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; }  tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment