How To Add Background Image To A Section On Shopify

In this tutorial i will show you how to add background image to a section on Shopify and set background picture for the section only without changing the whole background of your Shopify store.
Adding background images to sections on Shopify is one of the most searched question from Shopify store owner because Shopify doesn't allow you to do this fo now.
Adding a background image can be one of the quickest and easiest ways to make your store stand out from others and specially for sections only, as it helps create an eye-catching look that customers will remember, It also adds visual interest and texture, which is key in creating an inviting atmosphere for shoppers.
Not only does it help with branding but it can also add personality and give your store a unique feel that customers won’t find anywhere else, Using backgrounds images on sections gives you more control over how each section looks within your Shopify store by allowing you to customize colors or patterns for individual pages or collections.

About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this Youtube channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.

#background #image #shopify

[abdigitalau]

For anyone on the newer Dawn theme (may work for other themes too), create a new colour scheme in your theme settings and set the background to transparent and apply that scheme to the section you want the background image to show.

[wendyvanloo]

DUDE!!!! Your tutorials are saving my entire life setting up my site THANK YOU SO MUCH

[uzzmjti]

When I copy and paste the code, it doesn't change the background for the section. I am using Dawn theme 10.0. I made sure I pasted the entire code properly and still nothing changes. I even tried Dawn theme 11.0, but still to no avail. Any suggestions or new code?

[mhsfvnf]

its not working for me, i was able to apply the whole picture background with your other tutorial, however this code isnt doing anything to mine

[scottymackay]

Tried to add background to collage using your code and it didn't work.

[lucascaceresroca]

Great video, keep up the work. Would love to see a video on how to put a photo as your header background.

[amberwoodchannel]

Thank you for all your tutorials...you are saving me a ton of headaches and Tylenol!

[MinMelancholy]

Honestly you a huge help I’ve tried multiple different methods and code and this was the only one that worked and easiest to use, thank you a lot 🤞🏻

[kellyowens]

Holy moly. This made my entire day. I love you.

[antonmoulard]

It worked just fine for me with the Dawn theme. For anyone having problems, make sure the background property doesn't enter in conflict with background properties from other css class :)

[Khaxxed]

At first, thank you for everything, truly valuable knowledge. wanted to ask if I can put separate photos under each collection. because when i add in one image in the bottom page of a collection, it duplicates in all collections.

[rayace]

Thanks for the info. My text dialogue box shift when I insert the background image. Any tips with centering it again? Thanks

[ChefSaidahFarrell]

This worked! But I have a brown border around the container. how do i get rid of it?

[iselinva]

I added a video banner header, and now I want to change it back to a image banner header, but it seems like the option is gone. I removed the video and now I have no banner at all. It seems like the option to choose a image banner header is gone and I can not add a section to the header

[saladmuxyidiin]

i knew is gona be somthing amazing before i click it 😄 W man

[nayyarsidharth]

works perfectly! you're a life saver man

[TeaSizzle]

Thank you! Do you know how to do this with image_picker instead of having to manually change the img_url?

[SofanArt]

Hi Anas, on your screen, you have left hand and right hand customise columns. But the current shopify version only has the left hand column? Why? Does I miss something?

[Tedefiodor]

Broski, I will keep commenting on how helpful you are to help you with the algorithm :D But honestly, short and sweet, to the point video AGAIN. Thanks G!

[fraccx]

Is there a way to add a transparent background to the image banner, so that the text is on top of the image alone?