How to add a large background image to a website design

Hi there, this video we're going to put the giant lion in the background. So no lion, big lion. Why would you hang about? Because we've done background images. We're going to do something slightly different. we'll do Positioning and No Repeat, and if you're interested we'll do the kind of VS code, coding website stuff for about the first three minutes. 

You'll notice there's lots more time in this video. So for the last few minutes we'll actually show you how to build it, in Photoshop with this kind of Transparency and Drop Shadow. It's not really that essential so watch the first three minutes, and then skip over if you don't care about Photoshop, but if you do, we're going to do a little field trip. So you'll need a note from your parents. The bus arrives at three minutes into this video. Be ready, I'll see you there. 

So I've got my Index Page open, and my styles.css open. I want to add my background image. Now weirdly, well not weirdly, but I can't add two background images, and you're like, "We don't have a background image", but remember, strangely, we have to use Gradient as a background image, so we can't do two on the Body tag. So what we're going to do is, I'm going to grab this background image, which is my gradient. We're going to add it to the HTML tag. We weren't using that currently because we--

I think we were doing 100%. So if you don't have it you have to add the HTML tag, and it works just fine. Let's have a little look, still works. Got my background gradient, nice. So over here I get to do my other background gradient. Background, not gradient, background image. Remember it's URL, and I need to go and add the image to my local folder. So in your Exercise Files, under Project2, there's one in there called image-lion-background. It's a little hard to see, and can you see, in the video, it's like I made this, I'll show you how to make this in the end of the video, but it's just kind of like transparent background thing. 

I'm going to copy it, put it on my Desktop, in Project2, inside of Images. Paste in here. I'll go over here, and we'll go to images/, Where is it? image-lion-background. Make sure the semi colon goes in, and let's just see how it looks. So kind of how you want it. You might decide that that's awesome, and that's how you want to do it. I wanted just one in the middle. So you can do Background Image or Background Position. Background Position, and you can do Background Position Top, and set it. I'm just going to go, make it Top and Center. So it's top, it's centered, I want it to not repeat. Actually let's disable that, because it will make more sense with this off. 

So we'll do background-repeat. I'm going to go to None. No, it's No Repeat. Thank goodness for suggestions. So without Repeat it just ends up kind of wherever your website is, just ends up in the left hand side. So now I want to turn this back on. Oh, short cut, I didn't add the last shortcut sheet, or the shortcut video. It was our 'Command\', so you select it, hold 'Ctrl' on a PC, 'Command' on a Mac, and hit forward slash. My forward slash, '/' is down by the question mark, '?'. And now it's kind of where I want it to be; nice. 

Actually what I want to do is to turn it around. We'll do that now when we show you actually how to make it, because you can see, it's kind of cool, it's the shadow-- the Drop Shadow around the back, but you can see through the background gradient. Now if you don't have Photoshop skills, no worries. I've already got the image obviously ready for you. You can skip on to the next video, but if you want to check out how it's done in Photoshop, it's worth a look. I'll show you in a sec, be right back. 

So I've got Photoshop open, I'm using CC 2019. It will work in pretty much every version of Photoshop, Why are we in Photoshop? I feel like we needed like a school trip, get away from VS code just for like half a video, at least I needed to anyway. I know that, I do videos like this, and if I use stuff like our kind of half invisible line, people will ask, "How did you do it?" Some of them are just like, "Answer that question right here." If you're like, "I don't care about Photoshop, I want to get back to my Web project", you can totally skip on now, we're not going to do anything code or web based, we're just making an image. If you want to do it, let's do it, let's go to 'File', 'New'. Over here switch it to pixels, and pick a size. I'm making my line quite big. Remember, my website's about 1024 across, I'm making this 1000. Big square. 

Resolution doesn't really matter, the thing that really matters is RGB. So click on that, let's click 'Create'. We've got a big white box. We're going to go 'File', we're going to go to 'Place Embedded'. I'm going to bring in something from your Exercise Files, under Project2, and it's called icon-lion-black. Click 'Place, and the cool thing about it is it's an SVG, which means Scalable Vector Graphic, means I can do this. It doesn't really matter how big it is, I can make it bigger. So if you're using 2019 and above you'll probably know by now, you just grab the corners and drag, you don't have to hold any keys down. You might hold down the 'Option' key on a Mac, 'Alt' key on a PC to get it go from the center. If you're using CS6 or a really old version you have to hold down 'Shift', to make sure that it scales without doing that distortion. 

Mine's going to kind of fill it in there, I'm going to make mine a little smaller, because I need the Drop Shadow to go around the outside. I've hit 'Return' and what I might do before I go any further, is I'm going to go to 'Edit', and I'm going to go to, sorry, yeah, Edit. We're going to go to 'Transform', and we're going to 'Flip Horizontal'ly, because in my current one I feel like he's facing the wrong way. He's facing the same as the logo, but it's kind of hidden behind all that stuff. So I flipped him across. We're going to add a Drop Shadow to him. So with it selected in your Layers Panel, go to 'Effects', we're going to go to 'Drop Shadow'. 

So Drop Shadows, let's crank it right up so we can all see the opacity, and then the main two you're going to play around with is distance, kind of how far does that Drop Shadow feel like it is away from the subject, and then the size is how blurry it is. If I have the size down to 0, you can see, it's a very strong crisper edge one. So in my case I've already kind of messed around with it. I want it to be both quite low. So the distance is quite low, the size quite low, and it's this kind of like little Drop Shadow. Maybe a little bit bigger in terms of the size, but fluffier.

I'm going to have the opacity quite low, which is going to make it quite hard to follow in this tutorial, because it's going to be super low. You can barely see it there now, but it's definitely there. Let's click 'OK'. Now the magic trick is somehow turning on-- because if we lower the opacity of this layer everything turns off. That's where this one comes on, everyone in Photoshop is like, "What's the difference between these two?” and you're like, "They do the same thing," except when you have a layer, that you'd like to turn the opacity down on, but not the effect. So check this out, if we turn the Fill down to 0, can you see, the actual layer itself turned down, but the effect is still there, you can kind of see him now. 

Next thing I want to do before I export it is I don't want this white background. So with it selected I'm going to hit my trash can, and that is ready to go. All I need to do is make sure I pick the right file format. So we're going to go to 'File', I'm going to go to 'Export', 'Export As'. And, remember, JPEGs, no transparency, bad. It puts the white back in, like, "Go away." So the one I want is PNG. Why aren't I using SVG? Because SVG is good for vector graphics. All those hard edged things, when I start getting into this, like blurry background stuff, it's just not going to work, so PNG. 

Now, also what I might do for this PNG is that, this PNG has very little information in it in terms of, it's got a few grays, that's it, and some transparent blocks, so I can use the smaller file, which is just 8-bit PNG, it's going to make the file sizes, have a look. So it goes from 83 down to 46. And there's no visual difference. If you are dealing with a real super high quality image, you want to turn it off, and the default is, what is it? 16-bit. Sorry about it, just turn on 8-bit, you'll be fine. 

PNG, where am I going to stick it? I'm going to stick it on my Desktop, in my Project2 file, in my Images, and I'm going to rename it image-lion-background. That's the one we had earlier. This guy is the same but he's facing the other way. Let's click 'Save', I'm going to replace it. Give it a sec, let's have a little look at our version. Look at that, there's our guy. He's in the background, and he's facing the right way, or our way. That's how to do that type of thing. 

The cool thing about it is that it shows through the gradient in the background. Of course, if you didn't have a gradient, just a solid color, you could actually just put that solid color in, in Photoshop. So I made a new layer, put it underneath. You can go to image, sorry, 'Edit', 'Fill', and just with that layer selected, you can pick a color, and in my case I pick color, you can go through and maybe type in the Hexadecimal number that you're using. I can't remember what our one is, but that's what you could do. I could drag it around, and you could put that in there. Then it could go as a JPEG because there's no transparency. 

All right, field trip over, back on the bus. Let's get on to the next video.