Hi there, this video, we're going to put the giant lion in the background. Okay, so no Lion. Big Lion. Why would you hang about because we've done background images, we're going to do something slightly different. Well do positioning and no repeat and if you're interested Okay, we'll do the kind of V. S. Code coding website stuff for about the first three minutes. You'll notice that 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. Alright, so I've got my index page open and my style start CSS open. I want to add my background image. Now. Weirdly, we're not weirdly, but I can't add ...

two background images. Okay. 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 gonna do is going to grab this background image, which is my gradient. We're going to add it to the html tag. Okay. We weren't using that currently because we I think we were doing high 100%. Okay. So if you don't have it, you have to add the html tag and it works just fine to 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. Okay. And remember it's the U. R. L. And I need to go and add the image to my local folder. So in your exercise files and project to, there's one in there called Image. Lion background. It's a little hard to see. 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 anything. I'm going to copy it. Put it on my desktop and project to inside of images paste in here. And we'll go over here. Okay? And we'll go to images slash whereas an image line background, let's make sure semi colon goes in and let's just see how it looks. So kind of how you want it. Okay you might decide that that's awesome and that's how you want to do it. I want to just one in the middle. Okay so you can do background, image or background position, background, even background position and you can do background position. Top and set it. Okay I'm just going to go make it top and center. Okay so it's top it's centered. I wanted to not repeat actually just to say well that because it'll make more sense with this off. So we'll do background peace. I'm gonna go to none. None. I know it's no repeat. No repeat goodness for suggestions. So without repeat. It just ends up kind of wherever your website is. Okay. It just ends up in the left hand side. So now I want to turn this back on. Oh, shortcut. I didn't add the last shortcut sheet. Okay or the shortcut video was our command backslash. So you slipped it, hold control on a PC command on a Mac and hit forward slash. Okay. My mind four slashes down by the question mark. Cool. And now it's kind of where I want it to be nice. Actually, what I want to do is turn it around. We'll do that now where we show you actually how to make it because you can see, it's kind of cool. It's the shadow from 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 and 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 the sec be right back. Okay, So I've got Photoshop open, I'm using CC 2000 and 19. It'll work in pretty much every version of Photoshop and why are we in Photoshop. I feel like we need like a school trip. Okay. Get away from V. S code just for like half a video. At least I needed to anyway. And I know that I do videos like this and if I use stuff like our kind of half invisible Lion people will ask, how do you do it? So I'm also 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. Okay, over here switches to pixels and pick a size. I'm making my line quite big. Remember my websites about 10 24 across. So I'm making this 10 00. Okay. Big square resolution. Doesn't really matter. The thing that really matters is R G B. Okay. So click on that, click create. Okay, we've got a big white box. We're going to go file, we're going to go to place embedded. Okay, we're going to bring in something from your exercise files under project too. And it's called icon icon Lion Black 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. Okay, I can make it bigger. Okay, so if you're using and above. You will 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. Old key on a Pc to get it go from the center. If you're using CS six or really old version, you have to hold down shift to make sure that it scales without doing that distortion. Alright, mines going to kind of fill it in there. I'm gonna make mine a little smaller because I need the drop shadow to go around the outside. I've had return, what am I do before I go any further is I'm going to go to edit and I'm going to go to sorry edit even we're gonna go to transform and I'm going to flip horizontally because in my current one I feel like he's facing the wrong way, he's facing the same as the logo but he's kind of hidden behind all that stuff so I flipped them across so we're gonna add a drop shadow to him. So with that selected in your layers panel go to FX we're going to go to drop shadow. And my Yeah, so drop shadows, let's crank it right up so we can all see the capacity and then the main tool you're gonna play around with his distance. Kind of how far does that drop shadow feel like it is away from the subject and then the sizes, how blurry it is by the size down at zero. You can see it's a very strong crisp edged one. So in my case I've already kind of missed around with it. I want it to be both quite low the distance. Quite low. The size quite low and it's just kind of like mm hmm. Yeah, little drop shadow and maybe a little bit bigger in terms of the size bit fluffy And I'm going to have the capacity 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 click. Ok. Now the magic trick is somehow turning on because we will lower the opacity of this layer. Everything turns off. That's where this one comes on. Everyone's Photoshop 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 would like to turn the opacity down on but not the effect. So check this out But in the field down to zero. You see the actual layer itself turned down but the effect is still there and you can kind of see him. Now the next thing I want to do before I export it is I don't want this white background so with it selected, I'm gonna hit my trash can and that is ready to go. All I need to do is make sure I pick the right file format. Okay. So we're gonna go to file, we're going to go to export export and remember j pigs, no transparency bad. Okay. It puts the white back in your like go away. So the one I want is PNG, why aren't I using SVG? Because SVG is good for vector graphics. Okay. All those hard edge things when I start getting into this like blurry background stuff, it's just not going to work. Okay. So PNG now, also what I might do for this PNG is that this PNG has very little information in it. Okay. In terms of, it's got a few grays that's it and some transparent blocks so I can use the smaller file. Okay. Which is just eight bit PNG. That's going to make the file sizes have a look. So it goes from um 83 down to 46. Okay. And there's no visual difference. If you're 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 do not eat but you'll be fine. Okay. PNG where I'm going to stick it, I'm going to stick it on my desktop in my project to files in my images and I'm going to rename it image line background. Okay. That's the one we had earlier. This guy is the same but he's facing the other way, click save and 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 had didn't have a gradient, just a solid color, you could actually just put that solid color in Photoshop. Okay, 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 put color and you can go through and maybe type in the exact decimal number that you're using. I can't even remember what one hour one is but that's what you can do. I could drag it around. Hey, you could put that in there then it could go as a jpeg because there's no transparency. Alright. Off field. Drop over back on the bus. Let's get on to the next video

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

Large Background Image

Large Background Image

Lesson Info

69. Large Background Image

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks