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

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

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

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

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;
}