CSS In-Depth, v2 CSS In-Depth, v2

Repeat, Attachment & Position

Check out a free preview of the full CSS In-Depth, v2 course:
The "Repeat, Attachment & Position" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Repeat background, attach a background even with scroll and set the position of the background.

Get Unlimited Access Now

Transcript from the "Repeat, Attachment & Position" Lesson

[00:00:02]
>> Estelle Weyl: Okay, so next we have the background-repeat property. So the default for background-repeat is actually repeat. And unfortunately, the contrast looks really good on my screen. It doesn't look quite as good up there so let me see if I actually do this.
>> Estelle Weyl: No, just changes my screen, doesn't change anyone else's, okay, oops.

[00:00:32]
>> Estelle Weyl: Am I not in control? Okay, okay. So sorry about the contrast not being that strong, but we have repeat which repeats it. And let's just show you, repeat. Who would ever want to do that to their website? It depends on your image actually, right? No-repeat is what I'd originally put there and it did not repeat so the circle's in the upper right hand corner.

[00:00:55] Repeat-x repeats along the x axis, repeat-y repeats it along the y axis. This is probably not new to anyone. But these two values have been around, which is space. Now the difference between space and repeat and I'll show you space again.
>> Estelle Weyl: Notice space has no cut off background images.

[00:01:25] It added space between all the images and cut off the one that was halfway cut off. So I'm just gonna show that to you one more time. Repeat, you see there's more here than there were when I did space. So here if I actually had a background of black on the page and I repeated this image, which if it had a white background then the white would show.

[00:01:51] And that's not really nice, that might not be what you want. So there's a solution for that, which is around. And here they actually changed the size of the image so that it takes up all the space. So it's also just like repeat, just like space, there's none cut off but the first one, space, put space between the background images and this one changes the size of the background image

[00:02:19]
>> Estelle Weyl: And just so we can read the whole deck, I'm gonna go back to no-repeat. And here you can see what it says, repeated as often as will fit without being clipped then scaled so no space is in between. Where space is repeated as often as will fit without being clipped, spaced out evenly.

[00:02:39] Next we have the background-attachment property. And I think this slide deck doesn't work. We have fixed, local, and scroll. So usually when you have a background image on an element,
>> Estelle Weyl: If you saw here, with this, right, if I actually scroll down the page, that image, it depends if the div was scrolling or if I was scrolling the page.

[00:03:12] If I was scrolling the page, the background image would just go off the page, but if I was scrolling just within a section, that background image would stay where it was. So here, if I do fixed, it's actually fixed in a location that happens to not be behind this box right here.

[00:03:35] So it's fixed, oops! It's fixed, but not in a visible location. Here, if I do local,
>> Estelle Weyl: It's here and it moves with it. And then If I do scroll, it stays exactly where it is. So that's that property. Now we have background-position. So everyone thinks they know background-position, but there's something quirky about background-position that most people don't think about.

[00:04:19] So the reason that there's a four grid box there is to show you where the image is actually ending up. Right now it says background-position 75% 75%. That means this mark right here, which is a 75th percent of my square, right, this is the background image? And this is a 75th percent mark of that.

[00:04:46] It's three quarters of the way down from the top and three quarters of the way from the left and it is positioned exactly three quarters of the way across and three quarters of the way down. So if you were to say 50 50,
>> Estelle Weyl: This box is positioned, the middle of this box is positioned at the 50% mark.

[00:05:14] If you were to say 25%,
>> Estelle Weyl: 25%, it is this spot in this image that is positioned there. And so if this doesn't make sense, let me just switch it over to 0 and 0 and 0 and 0. So it is the 0% mark of that image that is in the upper left hand corner.

[00:05:41] Because if I change it to 100%, right?
>> Estelle Weyl: It is the 100% mark of that background image. So usually, if it's 500 pixels wide, let's say this div was 500 pixels wide. If I said background-position 500 pixels, it would be off the page. But in percentages, what it does is it takes your image, finds the percentage marks in that image, and places that at that dot.

[00:06:14] And that is why the 100% mark right now of that image is in the 100% mark. And if I do 90%,
>> Estelle Weyl: So you see basically I'm putting the green dot at the 90% part of the parent which also happens to be 90% mark of the background image.

[00:06:42] Is that making sense? And is that actually something that's new to people? Kinda never thought of it before, maybe. Maybe some of you have, okay. So what we also have that's not that commonly known is that you can position your background image relative to any corner. So most people think it can only position relative from the top left corner.

[00:07:04] But you can actually say make this 50 pixels from the right and 50 pixels from the bottom. And that's why it's here. So if I do 150 pixels from the right. This is not an interactive slide, sorry, the next one is. 150 pixels from the right and 150 pixels from the bottom.

[00:07:27] So you can use left and right and top and bottom. And let's just go back to that rectangle because I've never done this before. If I say background-position, bottom, oops, right,
>> Estelle Weyl: So it's the 90th percent mark from the bottom right that's being positioned at the bottom right part.

[00:08:06]
>> Estelle Weyl: Let's just see left.
>> Estelle Weyl: Yep, nope, well, my little thing doesn't actually show. That doesn't work right, but we'll leave it. You get the idea. Okay, so that's a 4-value background-position.