Jump to content

Custom background (repeated image) in a single page (Brine)

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.keikopowerwish.com/moon-sign/aries

Hi there,

I'd like to use a seamless pattern as a background for a single page in Brine.

So far, I figured out how to do this by targeting the .Main class, but this results in the header area remaining white. I'd like the background to go behind the header, as shown in the attached mockup.

Any help would be much appreciated!

Best,

Rieko

 

MSC_Result_1.jpg

Edited by riekoyamanaka
Link to comment
  • Solution

Add to Page Settings > Advanced > Header

<style>
/* transparent header */
header.Header.Header--bottom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: transparent;
}
/* change logo color */
header.Header.Header--bottom img {
    filter: invert(1);
}
/* change link color */
header.Header.Header--bottom a {
    color: white !important;
}
/* instagram color */
header.Header.Header--bottom svg {
    stroke: white;
}
</style>

Disable Ajax Loading if the code doesn't work. https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Thank you so much @tuanphan, this totally did the trick for making the nav transparent! Amazing!

The only thing that didn't work for me was the Instagram icon color, because the look I'd like is for the fill color to change, not adding strokes to the icon. So then I changed the code to:

/* instagram color */
header.Header.Header--bottom svg {
  fill: white !important;
  opacity: 1;
}

But the fill color of the Instagram icon remains a little transparent/greyish.

Anyone have any ideas?

Site URL: https://www.keikopowerwish.com/moon-sign/aries

 

Best,

Rieko

Link to comment
18 minutes ago, riekoyamanaka said:

Thank you so much @tuanphan, this totally did the trick for making the nav transparent! Amazing!

The only thing that didn't work for me was the Instagram icon color, because the look I'd like is for the fill color to change, not adding strokes to the icon. So then I changed the code to:

/* instagram color */
header.Header.Header--bottom svg {
  fill: white !important;
  opacity: 1;
}

But the fill color of the Instagram icon remains a little transparent/greyish.

Anyone have any ideas?

Site URL: https://www.keikopowerwish.com/moon-sign/aries

 

Best,

Rieko

.Header-social svg.SocialLinks-link-svg {
    stroke: white !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.