how to add background image in shopify

uh hello guys and welcome to my very,quick simple and easy guide to adding a,background image on Dawn theme and,probably all Shopify themes at this,point so the basic idea here is that we,want everything to have one background,image so you can use something like a,pattern or rain for example so let's get,a nice picture of rain,and we'll just write Ren jpeg like that,or actually let's do PNG so that it's um,something like this yeah so let's say we,want to add rain to our website okay,this is just an example obviously let's,actually add this one I prefer this one,so we are going let's say we're selling,water or you know water bottles or,whatever it might be so we want to add,some I just got I just got uh destroyed,uh how do I download this there we go,okay so this is just an example it's not,ever going to be uploaded to a real,Shopify store so I don't really care,that I don't have permission to use this,literally just using it as an example so,now that we have the image we want to,use we want to go on our Shopify backend,we want to go to files,and we want to upload that file,of course I can't drag and drop that,would just be too easy,okay there we go so this will take a,little bit of time uh we'll just,patiently wait for it it should be,appearing now okay so once we got here,I've got this bit of code here don't,worry if you're not a coder I'm going to,leave this in the description all you,want to do is you want to click here,where it says copy link and you want to,highlight,this link here and you just want to,press Ctrl V it will say just delete the,end part of that for some reason it,takes it as a variant of a product I've,got no idea why,when you click here for some reason it,gives you a variant I don't really know,why but anyway,so we've got this nice code here all,we're going to do is we're going to,click on online store,or themes here and we're going to click,on these three little buttons and click,on edit code we're then going to type in,base here and we're going to open up,base.css we're going to scroll all the,way down and we're going to click here,and we're going to press like that we're,just going to copy and paste it I have,no idea what this is going to look like,I hope this looks good,there we go perfect so you can see it's,got like an entire effect now the PNG,hasn't worked so probably be best to do,a JPEG with a white screen but you can,see that everything has been covered so,it kind of bleeds into each other really,really nicely I love this effect I've,always loved this effect make sure,everything's readable etc etc I think,I'm going to add this to my actual,Shopify store at some point I'm just,looking at a couple of these I actually,think I wanted to scroll so I'm going to,do background attachment scroll,and then when I refresh this this should,look even cooler it should almost be,like it's raining,yeah I don't think that changed anything,yeah I don't really know what changing,the scroll did there I don't know what,happened I don't know if it will,happened but yeah you can play around,with this for yourselves if you want to,know the other options then you can just,go on Google and type in,um,uh like background image W3 schools,and then CSS background image property,if you click on here it should give you,all the different options available so,we have conic gradient linear gradient,repeating gradient etc etc and we know,what all of these mean,and there should be color as well and,you basically change it looks like you,can use a gif as well,so this would it would definitely be,worth playing around with if you don't,quite like the look on your store then,you can definitely play around with the,options and see if you can change,anything I'm just going to very quickly,add,a rain jpeg with a white background or,maybe even a blue background like that,let's try and see what this looks like,I'm just curious if this looks better or,worse so we'll do the exact same process,we'll click on settings,click on files upload files,yeah,that should be super super quick,three two one,I have a feeling this is gonna look,really really nice,I have a good feeling about this,click on edit code again,it's open bass so you can just which,base is already open in this case and,highlight the current image,press Ctrl V and then delete the variant,it's done it again I really I don't know,what the hell Shopify is doing,an important thing to know is you if the,code is wrong the colors will be wrong,so I know that the this is all right,because it's all purple it's all the,same color let's see what this looks,like,I like it honestly uh one thing that I,don't like is the repeat,so we're gonna do background,um image repeat no,I don't actually know if that's right,guys so let me just quickly,let me just quickly check if that's,correct,no,uh it looks like it's background repeat,not image repeat,so we'll do,background,repeat no that should work now let's,have a quick look,doesn't work for some reason,obviously you have to write no repeats,for some bizarre reason that I will,never understand in programming honestly,it's like they want everything to be as,complicated as possible so they have to,be paid to do it,it's still not working I have no,explanation why,it looks kind of awful like that it'll,be a lot better if it wasn't repeating,I've literally written the word,background incorrectly,that's probably why it's not working,okay there we go I'm 99.99 sure that is,now gonna work it's still not working,okay it does work but it just looks,terrible because the image is too small,so if you if you want to do this you,need a really really big image but you,get the idea guys,yeah look here background size cover,this is what we want this might look,terrible because of the image quality,but this should stretch the image across,the entire,uh thing,okay it's not working I think just,because the images are just not good,enough but you can see yeah the image is,too small if the image was bigger you,could see that this would work but make,sure that you play around with these,different things W3 schools is amazing,even if you're not a coder you can just,work it out for yourselves like you can,just change these colors change the,cover or whatever it might be make sure,you're using a big image if you wanted,to cover the entire screen,but yeah that's pretty much it I think I,preferred this one if it actually had a,transparent background I think it would,look really really nice so I think a,nice kind of mild effect with a PNG,transparent background is probably the,effect that I'm going to be using on my,own store this is not my own store this,is just a practice store that I use,um to make these videos I will say now,but I think uh this was actually best I,already has background size that's why,let's just try I just want to vertically,try this,because it seemed like cover was the one,that I needed to use,yeah now the image is just too small so,you can see the quality is gone but yeah,that's gonna be it for this guys having,a little experiment with this I hope,this helps if you want to just do it to,your header as well so I will just,quickly mention this you can do it,um by looking for your header in base,CSS so here you would just put the same,code and then if you wanted to do your,footer,it would be in footer.csms I think yes,for some reason footer has a separate,one so you'll just put it probably at,the bottom of this I'm not going to go,into details in this video thank you so,much for watching guys I'll see you,really soon with some more content look,out for the end of this video there's,going to be a playlist full of tutorials,just like this which means you never,have to pay for a Shopify developer,thanks for watching and peace out

Congratulation! You bave finally finished reading how to add background image in shopify and believe you bave enougb understending how to add background image in shopify

Come on and read the rest of the article!