You can use your own image for the header of your Squarespace site – and have a custom one for mobile too! All you need is the CSS in this step by step tutorial to make your Squarespace site look even more unique.
—
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
—
In this Squarespace tutorial, you’ll learn how to use your own image for the background of the header menu (aka main navigation) of your Squarespace website. We’ll use two different images; one for the mobile version of Squarespace and one for the desktop version.
Steps / Important moments from this Squarespace tutorial:
1:04 What size images I recommend using
1:26 How to upload the image you want to use
2:03 What part of the code you *need* to change to make this work in your Squarespace site
2:58 How to use a different image for the mobile version of your site
—
Here is the code for the desktop version of your site:
.header {
background-image:url(‘image-url’);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
Here is the code for the mobile version:
@media only screen and (max-width:640px){
.header {
background-image:url(‘image-url’);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
}
—
🔗 RELATED VIDEOS 🔗
🖼️ Design options for the header of your Squarespace website: https://youtu.be/bbR5_kYH30c
📝 Header button hover effects: https://youtu.be/dMHUh7OsiCE
🎨 Change the layout of your website header: https://youtu.be/9gQEFOcD0rc
—
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
—
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
