Adding a header image to home page only (Brooklyn Theme)

Highlighted
Tourist
3 0 1

Hello everyone. I am currently trying to change the way my header looks for the Brooklyn theme. I have gotten the homepage to look how I want it to look. However, I cannot figure out how to get it to only be that way for my homepage and NOT the other pages.

 

When the header background image is on my home page, it looks like this (first image) which is exactly what I wanted: First Image.png

 

However, when the header background image is on any page that is NOT my homepage, it has weird overlapping where the pattern starts over in random places throughout the header like this (second image) which looks tacky: Second Image.png

 

I am currently editing the theme.scss.liquid, but I am doing all of this through trial and error based off copying and pasting codes I've found in this forum. I do not know how to code by myself. If anyone can tell me what is wrong with the coding as to why I cannot get the non-homepages to look right, I would be eternally grateful.

 

 body {
    background-image: url("{{ 'Background.jpg' | asset_url }}");
  
      background-repeat: repeat;
   
      background-size: inherit;
      background-position: center center;
  
  }
 header {
    background-image: url("{{ 'Background.jpg' | asset_url }}");
  
      background-repeat: repeat;
   
      background-size: inherit;
      background-position: center center;
    
      .site-nav {
  .site-nav__link {
    color: #000000;
  }
}
   }

 

0 Likes
Highlighted
Shopify Partner
1840 177 707

Hi,

 

That "weird overlapping" is simply due to your background image not being a seamless pattern i.e. the edges of the image do not create seams as you tile them in either direction. The reason you don't notice that on the homepage is because the large hero slider is covering up the seams.

 

The easiest fix would be to create a seamless background pattern that you can then use as is. You'd still see a seam between the body and the header unless the header is exactly as high as the texture itself - but you could easily overcome that by not setting the background image on the header and making the header background transparent instead.

 

If you have a photo editing software such as Photoshop, you can google a few tutorials on how to create seamless patterns that you can use for repeating background images.

 

Hope this helps!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Tourist
3 0 1

Thank you for your response. Is there a code to have a header ONLY on the homepage and not on the other pages though? That seems like it would solve my problem. I think the way the homepage looks is perfect due to the fact that the slideshow covers up the issues, as you mentioned. So, if I could figure out how to ONLY use a header on the homepage and not on the rest of the pages, then I would be set.

1 Like
Highlighted

you can create custom section HTML in home page(editor toolbar) and add the css.

0 Likes
Highlighted
Tourist
3 0 1
Thank you. I can try that. But does anyone know what would be the CSS for
it? I just need to know what to copy and paste.
0 Likes
Highlighted
New Member
1 0 0

Have the same questions, looking for answer

0 Likes