Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
So what we're going to talk about in this video is one of the fun things you do with background images. As we saw in the previous video, you can associate an image with the background, so that it is repeated throughout that entire background, but that's not the end of it, you can actually affect how the images repeated. It doesn't just have to be sort of mindlessly tiled and fill in the entire background. As an example, here's where we were at the end of the, of the previous video. We can with probably background- repeat say let's repeat along the x-axis, which is the horizontal axis. If we do that and hit Reload, there we go, the image is repeated horizontally, along that which is to say along the x-axis, and now, the rest of the background where the image isn't being repeated, we can see the background color again, we can see the 85%, 85%, 85% gray.
So in the top left corner the image is repeating horizontally. You can also have it repeat vertically, and that's as simple as just saying repeat-y. Not why as in the question, but repeat along the y-axis. So now the image is repeating along the left side here, up and down, is starting the top left corner and just repeats along that edge there and again we can see the background color wherever the image is not drawn.
There's one more value you can use here, which is, you might not want your image to repeat for whatever reason, you might just want it to show up once, and then be there and with no repeat that's exactly what you can do. The image is placed by default in the top left corner of the element background and with background repeat or no repeat, it appears once and that's it. Now, with a little image like this, that might not be such a big deal, but you might have a big watermark of some kind that you want to put behind the top left corner of a document or, you know, some sort of transition effect.
That's where repeat x, repeat y and no repeat can come into play. With repeat x you can create with just a little tiny image of a gradient, you can create a drop shadow. For example, along the bottom of something or along a top of something. So that's where this, this repeating comes into play and with background repeat you can say no repeat, repeat x, repeat y. The default value is repeat, which is just to mindlessly title throughout the entire background. That's the default value.
Now that's all well and good but of course, you might want to have your nonrepeated image appear someplace other than the top left corner of the elements background and that's exactly what we're going to talk about in the next video.
There are currently no FAQs about CSS Web Site Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.