Video Summary

All right, this is going to be kind of a free flowing coding session. So we can just play with how the background repeat the background size and the background position can all work with each other guy. So if we have background no repeat, and we want to, let’s say instead of contain, we want to pluck cover right And like before, before I go in, and Alright, let’s let’s just look at this image as it is. Alright, so you gotta have the circle and you know, right down here is this little bottom and there’s like a, what looks to be like some little, maybe dates or code or something. Right. So we’re gonna put this as cover, so we’re gonna cover the whole, the whole surface of it, right? As we remembered, you know, and I’ll back it up. Right because if you take one away, it’s not full or the declarations not complete, so it goes back to the original. So this section right here when I hit our, we’re not going to see this this kind of cut off right here. 

Right? So now we have this image and is covering the whole section, but it’s not one position where we want like, or let’s say it’s not where we want maybe we want this middle circle to actually be in the center of this background. So what we’re going to do is we’re gonna come here, and we’re going to do background position and we are going to put center and center. 

And now we just made this image the right there, that middle image is now in the center of the whole background that we’re looking at, right. 

So now what we could do and also to is, what happens if we delete this repeat with with how we have it right now, the background size is covering so if we have a covering, basically, we don’t need the number of PII because we’re just taking that one image and we’re covering the whole thing. Now we go back and let’s say we did contain. 

Right now we’re just centering this image in the middle and we don’t have anything on the left or right we’re just saying this is the this is this image is as large as it’s going to be and as far as it can be without duplicating itself right with the no repeat what happens if we take off this repeat again. 

Now we have the original image centered in the middle but it is repeating right so what happens if we do no repeat? And instead of contain, we do set our center. Right? Now it’s in the middle. Now we can do let’s say contain, but we want instead of this maybe we want 50 pixels by 50 pixels. 

Right? So basically, the image was was up in the corner. Now we’re just pushed down 50 pixels by 50 pixels. What happens if we do 550 pixels? All right, now push it all the way down. To the bottom. Right. So these are how all of these background, the image that repeat the size, the position, all work with each other and we can we can slowly start tweaking things here and there to make sure that we are sizing our background images. The way that we want to. And again, when we get into WordPress, a lot of this work is already built for us and it makes it a lot easier. Understanding these properties and these values and how they work is going to make your life so much easier once you start getting in and you start creating these elements. Like just knowing how things work with each other is gonna save you so much time and so much headache once you start building your site. I mean, like I don’t know, I basically when I started this journey of mine is that I was a an actual before I became a WordPress developer, I was a coder I you know, I would build all this stuff from scratch, I would manipulate the CSS. So when I got into WordPress and I realized the power of what I can use, and what I can manipulate within the system, I not only was I able to build websites faster, but I was able to build them cheaper for my clients. I could add more functionality in a quicker amount of time and just build off of what other people have used and make it our own. So with that being said I just wanted to show you how these can all work with each other, and run the next section about learning about padding orders and margins.