Hi, my name is Dan and in this video we're  gonna look at background images. Now, there are two ways to add images to Dreamweaver. One is the way we've done earlier where we just, uh,  have our cursor in the right place and we add it. And, and an image ends up, um, sitting in our H TM L. Okay, if I click on this guy here  and I go to my source code, you could see him here he is  inside this, uh, column here and he's an actual thing here. He's called, uh, graphic old books jpeg.

He's got some alt text. Remember the alt text is so  that the visually impaired can see and read  or at least be read and what's on the page. And that's great for our website and great for Google. Google loves it. Now there's another way  of adding images as background images. Now it has a slightly different effect  and isn't great for browsers, um, in terms of,  uh, screen readers.

So let's have a look at that. Let's go back to live view. We're gonna do it um, to this gray box  of the background here of our band hero. So in the Photoshop file, you can see here,  there's a nice big image in the background I want to use. So to do it, I can't put an image on  and then put text over the top of it. It's a really big paining code.

So what the easy thing to do is  to find our band hero and our CSS. Let's find where is he, should we towards the top band hero. What we're gonna do is we're gonna go down to background  and background color. We're gonna leave that, it doesn't need to go,  but we're gonna use this one called background image. So we're gonna click on URL  and we're gonna click the little browse button,  click it again, click browse button again,  and I'm gonna go out to my desktop, go  to the dream move exercise files, go to images,  and there's a background in here of building. There he is there.

Nice big one. So I've made this in my Photoshop training course. If you want to go out and make kind of graphics like this  where we blurred it and add some noise. And that's done in a separate course. So check out my, uh, Photoshop for web design course. So we've created it.

Let's click open. Okay, so it's gone in the background here. Let's see it in the browser. Okay? At the moment it's at full size  and sits in the background there and that's fine. Okay.

You could totally leave it like that. And what I, the problem is, is get down to mobile  and you could barely make out  what it is in the background there. So what we're gonna do is we're gonna use a nice little  option in CSS that's called size. We're gonna change it to cover. Okay? So it's set to auto, which just fully puts it in there.

We're gonna set it to cover. Great. And what that does is that, watch the background here. When I readjust these sides, so if I make it smaller,  Can you see it adjusts depending on the size,  what cover does it tries to fit at the height  or the width, whichever goes first. So if I check out in my browser,  can you see it's using the width in this case? Okay, stretching it out.

But can you see it gets smaller, smaller, smaller  until there's not enough height. Okay? And then we will leave it locked in there. So it'll just stretch itself. So it makes sure it's a hundred percent covering the  background and it works really well,  um, with background images. Now, the trouble of using this, I guess then,  rather than just putting it in in as an object, is  that if I look at my HTL, so I've clicked on Band Hero  and I go to my co view, there's Band Hero.

There's no mention of this image in here. So for the people that are using a screen reader, um,  they're not gonna actually ever see this image, okay? Because it's introduced in CSS,  which is a separate file over here. If I find Band Hero in here, he's introduced over here. There's no alt text for it  and the screen reader doesn't see it. So this is in this extra file here  that gets ignored by screen readers.

Okay? So if you need an images that need to be part  of your website and read out  and be searched by search engines, it needs  to be an actual physical object. As for background image, there's no real reason for them  to be read out exactly  what the background image looks like, okay? It's just there for style points. Great. So that's how to set a background image in Dreamweaver.

Now make sure, I'm not gonna do it on the video again,  but go and back up your website. Alright? So here in the next one.