How To Add Background Image To A Section On 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.

[@jacobfarnan6470]

Legend!

[@breechcomet9724]

thanx man.

[@aliciacedron7318]

How tho?

[@aliciacedron7318]

Dont worry, made it . I had to write rgba on the color background themes settings

[@lovelaughandgathertogether]

Thank you.

[@wendyvanloo8536]

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

[@JonathanDase-n4b]

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?

[@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.

[@boutike-v4v]

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

[@TeaSizzle]

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

[@DhruvKhandelwal-x7j]

@onhowguy I did this to my footer and it worked as the footer video didn't work on Studio theme. Now when I change the view from Desktop or Mobile, I don't see the image being resized to that format. Is there any more code I need to add so that I can see the footer background properly in Mobile view also.

[@dl851029]

How to change the background color of selected text? Thank you

[@lucascaceresroca6254]

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

[@ChefSaidahFarrell]

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

[@OnHOWGuy]

Glad to hear that, Thats strange, is it just on theme customizer or even when you save and access the store ? Try adding : border-width: 0; inside the code i shared below the picture line. Please let me know in a new comment as its difficult for me to see replies now. Cheers

[@blau2417]

Hello! im using dawn 10.0 and this does not work, the image does not appear. Do you think you can do a updated version of this video or help me to fix this? Eitherway, much love. Your videos is amazing!

[@OnHOWGuy]

I got your comment on the other video and as i said i will do an update video just for dawn 10.0. Thanks, i appreciate that. Cheers

[@blau2417]

@@OnHOWGuy thank you so much, you are truly amazing.

[@OnHOWGuy]

@@blau2417 You're welcome and thank you

[@nudgexs]

great video ! I have text about my products and would like a picture just for the background of the text, is this possible?

[@Getitdone82]

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

[@OnHOWGuy]

You mean the multicolumn text box ?What theme/version are you using ? please let me know in a new comment as its difficult for me to see replies now. Cheers

[@shubhamshoor]

Hey man, can you make video on how to change the Wishlist icon. I have star icon right now and want to change it to heart. Thanks in advance.

[@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 🤞🏻

[@OnHOWGuy]

Great to hear that and you're very welcome. Cheers

[@tanviarora3547]

@@OnHOWGuy I don't get the copy link option after I uploaded the file under Content>Files in Shopify. please help

[@tanviarora3547]

I got the link and cleared error but the code did not work in dawn theme

[@fraccx1813]

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

[@amberwoodchannel]

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

[@kellyowens1222]

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 :)

[@lushvisuals]

what do you mean? I'm very new to coding.

[@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?

[@OnHOWGuy]

Hey, Things change with updates but functions are still the same so no worries. Cheers

[@CristianSquitieri]

You are the best! Thanks!

[@mahalg]

hello, i was wondering how i can get that right tab to show on the theme editor? I'm using Abode

[@kimberlytigner2471]

Is there a way to still do this while also having a custom background? Mine is not working with the custom background code you gave for the entire page.

[@TeamGamerCentral_]

I need to put a code in before the first part like “h2” does anyone know the code for image?

[@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!

[@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

[@JasonDean-pv4zw]

i,m a little annoyed i changed my whole theme with your ideas and went to product page collection pages and so on in rest of store and transparent background with image i chose changed text color everything so how do you get your menu with backgroud image and text to be same on every page and not just the home page

[@chelseavong]

Great video. Unfortunately this did not work for me. I added the code with my image link to the 'custom css' box on the header section but nothing changed. I'm using the Ride 10.0 theme. Do you have any idea how I might be able to get this to work? I'm just trying to add a background image to my header only. I need to have the logo and buttons have transparent backgrounds on top of the header background image.

[@OnHOWGuy]

If you have a custom background for that section or the whole Shopify store it might not work

[@lushvisuals]

it doesn't work for me. The links to my images in my files are red in the css editor

[@nayyarsidharth]

works perfectly! you're a life saver man

[@neurobutton]

can you please make a tutorial on how to create a live visitors counter?

[@scottymackay1801]

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

[@dilpreetsingh4008]

Heyy followed eveything step by step, trying to change the background for E-Mal Sign Up section with a PNG photo but it isn't working. Please help!!!!!

[@ankitraaj1670]

Hii, can u tell me if it's possible to have animated banners by just adding codes into mu custom css section

[@mattyg0910]

Hey love your content! Do you think you can make a tutorial on how to make each multicolumn square it's own background picture with text on top of it?

[@amandarodrigueztejeda8098]

What about mobile? is it possible to make it responsive?

[@juliethquiceno5684]

I was wondering the same thing

[@amandarodrigueztejeda8098]

​ @juliethquiceno5684 add this to the css: @media screen and (max-width: 767px) and then the same code but with the background you are going to use in mobile

[@juliethquiceno5684]

@@amandarodrigueztejeda8098 thank you for the response! I already tried it but somehow the editor won't let me save it after I add that code 😮‍💨

[@freak7103]

Bro does gif work in background

[@IroshanaRavishan]

Works fine. Thanks!

[@saladmuxyidiin1681]

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

[@OnHOWGuy]

Haha, thanks i appreciate the support legend. Cheers

[@alishalalani4918]

Hi. It doesnt work for me. I am using Pipeline 7.1.2 and nothing changes after adding the code. please advice.

[@darlenebrooks126]

Great job! I'm new to Shopify and this was exactly what I was looking for....Thank you!

[@darlenebrooks126]

Spoke too soon...same as others, it didn't work

[@OnHOWGuy]

@@darlenebrooks126 What theme are you using ?

[@Funnyandfeelgood]

please get back asap: It worked for me but it doesnt accept the adress of image, when i try smaller size images it works. Is there a maximum image file size?

[@lachlanoliwa7121]

Make sure you have your colour on your theme panel set to transparent for the image to come through!

[@Xoxo.gege23]

Im having issues changing the image. A comment comes up saying invalid custom css

[@AppKub323]

Thank you again

[@hafcefatimazahra3683]

Bonjour, est ce qu'il y'a moyen d'avoir une seule Chekout Page, sans installer d'application ?

[@OnHOWGuy]

For now you can only do that by using an app, Shopify has announced in January that its going ti launch one page checkout option but until now (May) its still at Coming soon so im not sure when its going be out. i'll do do some research on it and if i found a solution i'll make a video. Cheers

[@hafcefatimazahra3683]

@@OnHOWGuy Merci pour votre Réponse, Vous avez raison, Shopify L'a annoncé mais il n'est pas encore disponible comme pas mal d'autres Option, Mounaim RA avais fait une Video sur sa Chaine KZbin il y'a très longtemps sur Le One Page Checkout, Mais le Code ne marche Plus Malheureusement,

[@OnHOWGuy]

@@hafcefatimazahra3683 There is a lot of scripts online for one checkout page but they don't work for long due to Shopify updates and changes thats why im waiting for permanent solution for that. Cheers

[@itsDesiDesh]

NOT WORKING in my case. easy to follow steps but not working at all. i add the code for rich text background, and using PNG formate image. is there anything i'm missing?

[@Avetis_Avetisyan]

My friend I do exactly what you are doing and it didn't work, please help.

[@aliciacedron7318]

Hi! It did not work, maybe the back ground color is bothering

[@Raintreegarden]

Hi, it doesn't working on Craft theme

[@Adee_j___]

thank you

[@franner15]

When I add the code nothing happens. Even If I add my own picture nothing changes

[@OnHOWGuy]

Just make sure you don't accidentally remove something when adding the picture link.

[@whitesun2010]

@@OnHOWGuy Have same result, nothing changes, unfortunately

[@OnHOWGuy]

@@whitesun2010 What theme/version you using ? Cheers

[@christeenajose9647]

same issue

[@blackwatersirenstudio4400]

This did not work for me either. I'm using the Updated copy of Studio.

[@mr.alaska5824]

doesn't look like it works on "TRADE" template?

[@OnHOWGuy]

Which version you have ? Please let me know in a new comment as its difficult for me to see replies now. Cheers

[@mr.alaska5824]

@@OnHOWGuy 15

[@zolista]

It did not work;( are there any updates on how to make this work?

[@lachlanoliwa7121]

Make sure you have your colour on your theme panel set to transparent for the image to come through!

[@focusframe_lx]

@@lachlanoliwa7121yeah, but the buttons turn automaticly to black and i dont want that

[@HannylynGañgan-t9e]

It doesn't work for me, 😞. Anyone knows another way? Thank you 😞

[@OnHOWGuy]

What theme/version are you using ? this should work just fine if you have a custom css section on theme customizer. Let me know in a new comment as its difficult for me now to see the replies. Cheers

[@scottymackay1801]

Code didn't work.

[@ALIEN_5959]

hmmmm unfortunately dosnt work for me here in 2024 using New Dawn

[@juliethquiceno5684]

Good video but you talk too much, the tutorial doesn't start until the minute 5:21

[@asadnadeem1527]

Your code doesn't work!

[@darkrock2696]

It’s not working.,

[@shilpasundrani8141]

Not working on sense 11.0

[@lachlanoliwa7121]

Make sure you have your colour on your theme panel set to transparent for the image to come through!

[@johanndaoud]

doesnt work

[@ashishgarg9038]

bro it didn't work. please help me

[@OnHOWGuy]

Which theme/version you using ?

[@ashishgarg9038]

@@OnHOWGuy craft theme

[@ashishgarg9038]

@@OnHOWGuy Craft theme

[@Ahmad-bp2iq]

You waste our time for nothing

[@Droid-g5d]

Thanks Sir . Really Helpful !!!!1

[@OnHOWGuy]

Glad to know that