Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


riekoyamanaka
Go to solution Solved by tuanphan,

Question

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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Page Settings > Advanced > Header <style> /* transparent header */ header.Header.Header--bottom { position: absolute; top: 0; left: 0; right: 0; z-index: 999

Posted Images

3 answers to this question

Recommended Posts

  • 0

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
Link to post
  • 0

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 post
  • 0
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;
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...