how to make the header an image on shopify

so what we're going to do now is we're,going to take our website we want to add,this header image to it we're using the,radiant template that comes with Shopify,when you first install it what we're,going to go and do is we're going to add,a new div to the top of this document,and then we're going to set the,background of that div to be the image,that we have here so the first step that,I want to do is I want to get all my,assets together and I do that by saving,this image I'm a review background image,and I'm going to save it to my desktop,where I can easily get to it then we are,going to go over to our admin side and,we are going to upload it so it's,available for us when we need to pull it,in our CSS stylesheet so grab that's it,there we go oh no the header now what we,need to do is we need to go and look at,the elements that create up this page I,use a program called Firebug which is,great because it lets you inspect all,the elements and see what's going on,with all of the site if we look here we,can see you've got this html5 tag header,with an ID of top that's basically,taking up the area that we want to put,the image now I don't want to mess with,any of that stuff,I'm actually going to add a new div for,the time being just above it just for,the sake of this demo so that I can get,the positioning the way I want it so,what I want to do is in order to make,that change is go into my template,editor which I'm here is under themes,and then template editor I'm actually,going to modify the theme liquid,template which is under layout and,layouts and it's the top one so we go in,here we've got a bunch of code that make,up the website bunch of liquid tags and,that sort of thing but what we want to,do is we want to scroll down until we,find that div header that we had on this,page over here and we're going to plug,in a new div above it and we are going,to call it it with an ID of a header,image for the time being so we can,identify it properly we're going to,close that tag once that's saved we can,go back over to our document over here,and refresh it and we'll see that we,have a new div that,than added now it doesn't do anything,yet because we haven't actually given it,any properties in the stylesheet so I'm,going to go over the style sheet and,we're going to grab the style sheet now,typically I like to add all of my Styles,right to the bottom I do this because,it's easier to find them later on the,style sheets that come from the,templates are usually quite in-depth and,a lot of the time you're searching,around for hours just trying to find the,right line number but if you put,everything at the bottom whatever you,write overwrite whatever was in the,template file so you don't have to make,a mint to make less modifications to it,so we're gonna use a pound because it's,an IDE and it was called header image,and we're going to start off by giving,it a background so the background we use,URL and that item that we uploaded and I,believe it was called team Whistler,sorry team Whistler underscore header,JPEG we can index it directly cuz it's,of the assets which is another great,thing about Shopify you don't have to,know your relative path then what we,need to do is we need to give it a width,and a height so I'm going to go over,here and I'm gonna view the image info,see few image info and it's going to,tell me that this image is 960 by 389 so,when I go over to my stylesheet I can,give it a width 960 pixels of 369 pixels,and I'm going to close that off save her,up and we fire on over to the other page,and we should everything worked out,properly have let see I possibly spelt,it wrong let's go back over here let's,go to team oh it's an underscore it's,not a - save that,/ and we have our header image it's not,the exact right size right now I'm going,to have to modify the template slightly,to allow that but for the most part of,it we have our downs in

Congratulation! You bave finally finished reading how to make the header an image on shopify and believe you bave enougb understending how to make the header an image on shopify

Come on and read the rest of the article!