How to Add a Background Image to a Web Page With Dreamweaver

Video Transcript

"Hi everyone, I'm David Casuto from San Fransisco Computer Tutors, and we're going to be learning how to add a background image using DreamWeaver. You're going to be adding a background image, maybe sometimes your logo, or an image that illustrates your product, things like that, so it'll be very beneficial to do that, and it you'll see how easy it is in just a few steps. First thing you want to do is make sure that your properties panel is open. If it is not open you want to come up to Window and choose properties. And for some of you it might come up on top and then some of you it might come down at the bottom, so you can see mine is down here at the bottom. And what we want to look at is our page properties. So come down to the bottom, and you're going to see page properties, and you're going to see we have a bunch of different things here, and we're going to be focused on the appearance tab here, under category. So you see we have a few different things like page font and size, text color, background color, and we also have our background image, and that's what we're going to focus on for here. So we're just going to click on browse, and it's going to basically take me, hopefully to our source where our site root is, you should know what that is when you created your site, and mine is just called Story Street, and then you'll see here I have a few different files. And you notice that some of them are grayed out and some of them are a little bit more lit up. The ones that are lit up, you guessed it, are image files, like GIFS and JPEGS and maybe PMG's and things like that. Okay, so it knows to look for image files, so this is the one I'm focused on, this Story Street, so it's going to be bamboo, okay, then you see that Mac gives me a little preview of it, and if you are on PC you should also have a thumbnail view of it as well. So now that I've chosen it, I'm going to go ahead and pick choose, and now it takes me to the window and I see here, bamboosinglecane.gif, and that is the path that leads to my image. Now before I click okay, I want to show you this part right down here, this repeat, okay. Now by default DreamWeaver will repeat your image over and over and over again, giving as much space as you allow it. So I don't want it to repeat, so I'm going to click on this drop down and we're going to choose no repeat, okay. And down here at the margins you can decide where you want within the page, how many pixels from the left, right, bottom and top as well, so I'm just going to keep it as is, and then I'm going to go ahead and click okay. And then just like that my image appears before me. Thanks, well that concludes our tutorial on how to add a background using DreamWeaver. And once again I'm David Casuto from San Fransisco Computer Tutors. You can find more about my company, go into Yelp.com, and typing in San Fransisco Computer Tutors, and look me up any time. Thanks."