Replace Header and Footer Background with Image

Technical Q&A
1

Hey everyone, I’m pretty illiterate with code in Shopify, and I’m having trouble adding a background image for the header and footer of the site. The theme I’m using is Venture.

I made this image to show what I want the end result to be, right now they are just black.

header-texture-idea.JPG
header-texture-idea.JPG1213×901 108 KB

I’m not sure if the floating navigation (home, products, about) is a different part, and you cant have a seamless transition in the image, but I’m really hoping you can. When you scroll down, the image also has to attach to the floating nav.

If anyone can help me out here, or give there 2 cents, I would greatly appreciate it!

Thanks in advance,

Holden

2

Hello @avenue5000 ,

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss.liquid->paste bellow code in bottom of file
.site-header {
 background-image:url({{ 'image.jpg' | asset_url }});
}
#StickyBar {
background-image:url({{ 'image.jpg' | asset_url }});
}
#shopify-section-footer {
background-image:url({{ 'image.jpg' | asset_url }});
}
3

Screen Shot 2021-01-06 at 11.10.22.png
Screen Shot 2021-01-06 at 11.10.22.png410×456 21.1 KB

Hi I don’t have the theme.scss option in my assets so i’m sure where i should be placing the script. could you assist?

4

Hello ,

is it normal that i 've tried many ways to charge an image in the header but it doesn’t load?
I tried your solution , I tried others and it is always white ,

1/ when i put a color instead of transparent as below , the header change correctly to red

header.site-header {
background: red ;
}

but when i put
header.site-header {
background-image: url(“1.jpg”);
background: transparent;
}

or

header.site-header {
background-image: url(“1.jpg”);
}

nothing happens only white.
Could you please help?
Thanks,
Maya

5

Hi I don’t have the theme.scss option in my assets either