Subtitles of the Movie

In the previous movie, I demonstrated how to use the Background property to insert background images for the various CSS Elements. I demonstrated how to use a background image in a DIV Tag, which I have an example here. But you'll notice if you go to the background category in the Dreamweaver CSS Rule Definition Dialog, There's a Background Color setting, a Background Image setting, but also a Repeat setting. So let me review the various options here including No Repeat, Repeat, Repeat X and Repeat Y. I have some examples set up here. Here in this example we have an example of the Repeat, No Repeat Value right here. Background Repeat, No Repeat just gives you one single slice of that image. The down side with this, using the background images, is that the images can be quite large and can really increase the file sizes and download times of your pages. So you're able to repeat or tile your images in any way you want. So this is an example of the No Repeat setting and there is the syntax for that if you want to write out your CSS. But there's also a drop-down menu that shows these as I demonstrated here in the CSS Rule Definition Dialog Box. So there's the first option, No Repeat. Also notice Repeat in the X direction, Repeat X. Notice that this takes my thumbnail and repeats it out seamlessly, in this case in the X direction. Also choose Repeat Y, which will repeat that down in the Y direction and then Full Repeat or just Background Repeat colon Repeat here will then tile that image both in the X and the Y directions. So going back here to Dreamweaver, there are your various options: No Repeat, Repeat X and Repeat Y. Now, in addition to the Repeat property, you've also got Horizontal Position and Vertical Position properties. For Horizontal Position you can position your images to the left, center or right or choose a value, in which case you can choose pixels, points, inches, centimeters, as well as Ms, Xs and percents. For Vertical Position you've got top, center, bottom or a value. To demonstrate how this looks I have an example here with my Background Image Repeat No Repeat, a little smiley face here for my background. Now let's take my Background Position settings; there's Horizontal and Vertical and change that from 50 to 10 percent. Click on the Edit the text file and click New button and notice that that changes down there. Let's go ahead and move this to 50 percent for the second value and that's the, let's go ahead and refresh my page. And notice that that moves it back over to this position. Here's the results if you decide to use a value and set the value to pixels. I have 50 pixels, 100 pixels. So if I change the first setting from 50 pixels, let's change that to 250 pixels and notice that it moves it 200 pixels over to the right. So this demonstrates that you can place images as backgrounds to your various CSS Elements and then use the Position settings to control the position in the horizontal and vertical directions of those images. So that will conclude this section of the tutorial covering color, backgrounds and images. In this section we learned about selecting color palettes for your designs, specifying colors using hexadecimal values or RGB values. We've learned about background properties as well as the GIF, JPEG and ping image formats. We've learned about the Background Image settings of Repeat, No Repeat, Repeat X and Repeat Y, as well as how to position your images using the Background Position property.