Shopify themes, liquid, logos, and UX
Join us March 21 for an AMA on planning your 2023 marketing budget with 2H Media co-owners, Matt and Aron
Hey There,
I'm really hoping i can get some advice here, i am using the "Material" theme by roarthemes and I've been trying to add an image background to the header for 5 hours now, it's driving me crazy. Would anyone have any advice or code that i could use in order to add a background image to the header above the nav bar ? See attached, where i was hoping to add the background image (headbg.jpg)
https://rt-material.myshopify.com/
Solved! Go to the solution
This is an accepted solution.
First of all remove "(here give new cdn path )" in css file .
Thank you.
This is an accepted solution.
Also remove (position change as per requirement)
Because it is just information not a code
Thank you.
Hi, here I attached one screenshot for header background Please confirm look for that .
Thank you.
Denishamakwana you are a genius! that is exactly what im looking to do. Can you give me the code you used to get that image in the background of the header please. You're a star!
First of all add image in admin side which you want to header background.
then see cdn path for that particular image.
then add below css in bottom of assets/rt.style.scss.css file
#header_nav {
background-image: url(//cdn.shopify.com/s/files/1/0885/9170/t/8/assets/slide_image_2.jpg?v=872245961168612101); (here give new cdn path)
background-position: top; ( position change as per requirement)
}
Thank you.
Thanks Denishamakwana for your swift replies, much appreciated.
I added that code in to the assets/rt.style.scss.css file but it broke the site unfortunately. It seems that everything above the slider where the nav bar is broke when i put that code in. Do you have any advice for me ? How did you get the image background into the nav bar like the picture you posted earlier that was perfect !
here is the link to the background image i would like to use in the nav header area like you did earlier
https://cdn.shopify.com/s/files/1/0614/4681/5953/files/headbg.jpg?v=1647394233
See attached
This is an accepted solution.
First of all remove "(here give new cdn path )" in css file .
Thank you.
That worked, THANK YOU so very much !!! It is perfect, exactly what i needed.
You have been extremely helpful and solved my issue very professionally. Thanks again Denishamakwana REALLY appreciate your helpful advice and instruction
REgards
Rob
This is how the header looks now, just like i wanted it !
This is an accepted solution.
Also remove (position change as per requirement)
Because it is just information not a code
Thank you.
it's my pleasure to help you .
in future any query regarding any customization of your site please contact me.
Thank you.
I certainly will do that. Thanks again
in my shopify i do not have "rt.style.scss.css" is there another place i can paste this code
User | RANK |
---|---|
177 | |
156 | |
92 | |
33 | |
30 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023