How to create a CSS background image in Dreamweaver

Hi, my name is Dan. In this video we're going to 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 had our cursor in the right place, and we add it, and an image ends up sitting in our HTML. If I click on this guy here, and go to 'Source Code', you can see him here, he is inside this column here, and he's an actual thing here, he's called graphic-old-books.jpg, he's got some alt text. Remember, alt text is so that the visually impaired can see and read, or at least be read 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, it's background images. It has a slightly different effect, and isn't great for browsers in terms of Screen Readers. So let's have a look at that. I'll go back to 'Live' view. We're going to do it to this gray box at the background here, of our 'band-hero'. So in the Photoshop file, you can see here, this nice big image in the background I want to use. To do it, I can't put an image on an input text over the top of it, it's a really big pain in codes. So what the easy thing to do, is to find our 'band-hero' in css. What we're going to do is, we're going to go down to background. And background color, we're going to leave that, doesn't need to go, but we're going to use this one called background image. I'll click on 'url', and we'll click the little 'Browse' button. Click it again, 'Browse' button again. And I'm going to scroll up to my 'Desktop', go to 'Dreamweaver Exercise Files', go to 'Images', and there's a background in here, a building. Here he is there, nice big one.

I've made this in my Photoshop training course. If you want to go out and make graphics like this, where we blurred it, added some noise, that's done in a separate course. So check out my Photoshop for Web Design course.

So we've created it, let's click 'Open'. It's gone in the background here, let's see it in the browser. At the moment, it's at full size, and sits in the background there. And that's fine, you can totally leave it like that. Problem is, go down to a mobile and you can barely make out what is in the background. So what we're going to do is use a nice little option in css. That's called 'Size'. We're going to change it to 'Cover'. It's 'Set to Auto', fully puts it in there. We're going to set it to 'Cover'. What that does is that-- watch the background when I readjust these sides. So if I make it smaller, it adjusts depending on the size. What Cover does, it tries to fit the height or the width whichever goes first. So if I check out in my browser, it's using the width in this case, stretching it out, but it gets smaller until there's none of height, and then will leave it locked in there. So it will just stretch itself, so it makes sure it's 100% covering the background. It works really well with background images.

Now the trouble of using this I guess, rather than just putting it in as an object is that-- if I look at my HTML, so I've clicked on 'band-hero' and I go to 'code-view', there's band-hero, no mention of image in here. So for the people that are using a Screen Reader, they're not going to actually ever see this image because it's introduced in css, which was 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 say it. So this is an extra file here that gets ignored by Screen Readers. So if you need 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. It's just their Style Points.

So that's how to set a background image in Dreamweaver. Now make sure, I'm not going to do that on the video again, go and backup your website. See you in the next one.