Replace Header and Footer Background with Image

Solved
avenue5000
New Member
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

0 Likes

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

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
edmundo11
New Member
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?

0 Likes
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

0 Likes