Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.