Video Summary

All right, so we’re going to start playing around with the background position property. 

Notice from like the previous examples, I added a few more paragraphs to this page because if we only had one paragraph we weren’t able to really see how we can use the background position elements to really move this background image around. Alright. So, as we learn from the previous slides, everything starts off at the upper left hand corner. So as we go through, we’re going to play around with some stuff, and we’re just going to see, you know, just see what happens. So let’s start off with direction. All right, so we always have to start off with left or right or center when we’re doing direction so let’s do right let’s do right bottom. 

Alright, so now we are have the we started off we went all the way right and it went bottom. If if you only have one, like left, right, it will still end up going and center of what you want. So even if we put center right right center, it stays the same. 

Alright, so basically what’s happening is, is we are having it become a follow up here. We are where you were targeting the body so so as your CNS, we’re moving this all around the actual web page and since we have to scroll up, like if you see, even though it might not be perfectly center, but it is center from where the whole page of that and if I come up here, it’s in the center direct center of where that that I mean, drop it back down so we can still keep playing with this. 

I think I could probably move it up. Probably right up here. Alright, so from here, let’s go let’s try the percentages. 

Let’s do 50% And nothing so let’s do 50% That’s right where that’s the middle of the page. So let’s say let’s try this. 

Let’s see if this is going to work. Let’s do 10% So since we haven’t dedicated we haven’t specified the vertical this because the first one is the left the right. 

Second one is the vertical up and down. So this is just 10% off of this whole page. So let’s let’s see what happens when we do 90%. That’s over there. Now let’s say if we want to have this up at the top, when you 10% Right there. Now we can go and do that. Let’s try to flip this let’s do 10% And let’s do 90% And now it’s over here Alright, so this is all based on percentages. So no matter what how wide the device is, or how fit or all all devices, this basic going on and relative screen size. But now let’s let’s try this out. Let’s do pixels. Let’s do pixels. And we’ll do 90 pixels here. 

So now that and so now we’re 10 pixels off 90 pixels down, right? And you can mix and match if you wanted to. So if you wanted to say I want 10% off but I wanted 90 10% off I want 90 pixels down, you can set up like right like that. It’s kind of better to set up, keep it kind of uniform. But if you run to something where we’re developer set it up like that, or you try and that’s what that’s what gets you the exact positioning. Feel free to use it if you want to. But that’s basically what it is, is you’re just moving this same position around and remember that we have this background repeat on no repeat. So let’s just say if we took away this repeat. 

It just repeats everything there. We’re basically not positioning anything. It’s just covering the whole page right and the whole section. Let’s do no repeat. And I want to show you like instead of doing body, let’s just do p the p tag. 

Right. So now we’re just basically positioning this in, in a way where it’s each each. Each paragraph has this background image and replacing it says that this paragraph is a very large must try and we have and we’re forcing it down 90 pixels. So if we do maybe 10% or less 90%. But let’s do great, right? It’s just positioning that in a different way. And basically, in that context, so it’s not always the body, the background of the whole website. Sometimes it’s the background of a certain section. So if you wanted to maybe have the this image at the bottom right hand corner of every paragraph, you potentially could write. So that being said let’s hop over and talk about background size.