Large Background Image
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
Lesson Info
Large Background Image
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
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding