how to add background image in pop shopify

hey people welcome back to another video,and,thank you guys again for giving me over,100 subs,um i'm not gonna have like a little i'm,not gonna have any like a touchy story,or anything but,i just wanna let you guys know that i,appreciate you guys for subscribing,and liking videos and continuing to,watch for watch with me um,so as you can see we're going to get,into some,shopify editing stuff and,um the online store is password,protected in this one,i'm doing the background um explanation,for,the debut theme again as you can see in,the title,i'm doing this a second time because,it's been about,six seven months and also the first,video is a little blurry,so i want to be able to give you guys a,better quality video and,actually add some more tips along with,editing these because a lot of questions,were being asked like,oh um how do you stop it from,duplicating the image,or um how do you make the image wider,and cover the whole screen,i'm gonna handle all of that in this,video for you right now,so let's get into it guys so we're going,to start by going to the debut,go to debut actions,well all i did if you guys down here in,the hog after this step,um just click on online store and then,themes should pop up and,all we did was get the debut thing,if you don't know how to do that you go,into explore free themes,and then you can scroll down and you get,the free debut theme,but from there click actions,uh down edit code,and this is i'm recording this as of,july 14th so this is current,this isn't like something i did a couple,months back like,this is a more polished version,of my last video so,to continue on what we're going to do is,you can close up these folders over here,by clicking on them we're going to do a,scroll,and um let me delete these,really fast,just to help with the,video okay so what we're doing is,we're going to start by going to the,asset folder right here and you see open,and closing,it might be annoying but i just want you,guys to know exactly where i'm,at and then from here we're going to go,down to the,s c s s dot liquid,and from here this is another thing,people can,you're going to click on your keyboard,if you have a mac is command,f the command button next to the space,bar,plus f on windows is ctrl,f so i'm on windows so i'm gonna press,ctrl f,and voila the search bar pops up,and from here um,we are going to type in basic,and you should be taking down the basic,styles which is right here,whoop did not mean to do that but it's a,comment to one year matter,so yeah you're gonna be basic styles,which is right here,uh the arrows if you're not here and you,typed in basic you would just press the,arrows to navigate,but you should end up here so we're,going to click right in front of this,bracket,and then we're going to press the enter,key,and here you're going to paste in the,code that is at the bottom of this,video well in the description not the,bottom of the video it's in the,description,and it should be as follows,background url,uh with the brackets and the parentheses,you can just copy and paste this so if,you don't know if you can't see this,can't read it then just copy the code,that's in the description,and it's going to be both dot j,uh pg see if i can zoom in for you guys,see if that's possible,all right so for if you can't see this i,just zoomed in,as close as i could and this is it this,is,what it should look like and,that's pretty much it for this but,before i forgot i deleted some files,you go back over here under assets add a,new asset you click that,choose file and then you're going to,click,your uh,you're going to click the the image that,you want to use as your background,so i'm using my boat dot jpeg,and i'm going to upload that,and that's going to be my image for this,so it should pop up,at the bottom of your assets and then,you go back over here,and where you see boat.jpg if,no matter what yours is it should match,the image,so i'm doing both blue.jpg but it should,match the name of your picture,and if you save it,i believe i should have some issues with,this so i'm gonna do it this way,uh,let's see we're going to click on this,and it's going to open in another tab,boom your online storage password,protected,uh huh,okay well if you click preview up here,it should open up another window and,then that window,thing should be working but your,page might be like a little weird,so let's see let's see how i can do this,for you guys,because i i know exactly what you might,be seeing if it's like if you're seeing,duplicates,so we're gonna right click this so all i,did was,right click and then uh open link a new,tab popped up,you click on that to open it up in,another tab and now we're on this page,and this is the file i mean this is the,theme,and we're gonna click preview it should,show,okay so you see what's going on you have,it duplicating it looks weird,blah blah blah um,let's zoom out see if that fixed,anything it shouldn't but,just to make sure okay so we zoomed out,and you see it looks disgusting you,don't want this happen,you don't want this popping up twice,right all right so,to fix that what we do we come back into,here,and we're going to add another piece of,code this,is also the description and this code,is uh we want to do,uh background cover our background size,so like i said this is in the,description,but you're going to just paste this code,in,i'll zoom in for the people who can't,see it,so this is what it looks like,all right cool so you're gonna save it,and then i'm gonna zoom out,i might be moving too slow for some of,you guys but i just wanna make sure,this works for everybody and you can,exit this tab out and then we're going,to go back here,and click preview again so it's going to,open up a new page,and now it's uh it looks,gross okay we made it full size,sure full width it covers the whole,thing but it doesn't look pretty,okay so what we do now we go back in,here,and let me zoom in for you guys again,and we're in here now and we're going to,add another piece of code,so we're each piece of code i just want,you guys to be able to see what it's,actually doing,so we got,the background size cover and now we're,active we're adding in the background,position,we want we want to center align the,image so whatever the center of the,image is it should be in the middle of,your web page,if you don't want to do this you can do,right you can change this to right or,left,so you can do this or you can do this,you know left line right align but i,want it centered,so we're gonna click save,it's saved so we come back here let's,see if i refresh if it's gonna do it,okay so it made the change,still not that pretty right but we,center our line it does look better,so what now we're going to add one more,line of code now this might be,a little annoying for you but in reality,we only added,a few lines one two three four five six,six all right we're about to add the,seventh line of code and i'm giving you,all these lines of code so it doesn't,really matter,so what we're going to do the last line,boom now if you're just taking it from,the description,make sure you do it this way so you can,tell which code is messing up your page,like if your image isn't coming out the,way you wanted to just do each of these,one at a time,now for like the covers you can do all,of them together,but um for the center,for the background position do that,separate,and for the background attachment which,is the last one we're doing,do that separate so background,attachment,is fixed we made that fixed and we're,going gonna save that,and from here we're gonna refresh we're,gonna go back to our,other screen i'm gonna zoom out again,and yeah now now looks beautiful,this is what it was supposed to look,like in the beginning we have a,beautiful background one,image it covers the whole screen,now another cold if you still have,multiple images popping,up as your background there's one other,piece of code you can add in,and it's this you don't have to,do this if everything looks good do not,add this code,if you still have duplicates in your,image try adding this and see if it,works,so we're going to go back to this page,and what we're going to do is we're,going to,um i mean if you guys don't know what,i'm doing like how is he pasting it so,fast i'm just pressing ctrl,v or command v i should have told you,guys that earlier but you're probably,doing it this way you're probably right,clicking,um which is fine but,if you don't if you didn't know how i,was pasting it was,you can right click it paste or you can,do control,v or command v to paste,so let me uh,zoom in,and as you can see this is the last line,we added,i don't need this but this is only if,you have,duplicates like if your image is like,constantly,like making copies of itself going,through you put background repeat,no repeat so it only uses the image one,time,and um let me show you guys an example,of what that would look like,so you guys see this right,this one has the no repeat but if we,take that off what happens,it looks like this,so keep the no repeat on boom it's just,one,but yeah that's um that's all for this,video,i hope you guys were able to get your,problem solved,if there's any other things you guys,want me to touch on just let me know,um if you enjoyed this video like and,please subscribe and help me get to 200,subscribers we're almost there we're at,140 we're,half almost halfway there um,yeah i really appreciate it if you guys,give me the 200 i'll be great that'll be,awesome you guys are amazing thanks for,watching and i'm out,peace

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

Come on and read the rest of the article!