New Shopify Certification now available: Liquid Storefronts for Theme Developers

Replace Header and Footer Background with Image

Solved
avenue5000
Visitor
1 0 0

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

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

Accepted Solution (1)
oscprofessional
Shopify Partner
15736 2353 3051

This is an accepted solution.

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 4 (4)
oscprofessional
Shopify Partner
15736 2353 3051

This is an accepted solution.

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
edmundo11
Visitor
2 0 0

Screen Shot 2021-01-06 at 11.10.22.pngHi 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?

netguy
Visitor
1 0 0

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

MkdMaya
Excursionist
14 0 3

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