Jump to content

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

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

Link to comment
  • Replies 3
  • Views 725
  • Created
  • Last Reply

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.