Video Summary
All right, we’re going to start playing around background size, property and the values. So right now we just have the image just as default is repeating. And we’re going to want to play around with how we can change the background, the background image size. So we’re going to come here and let’s just start off by playing with the pixels. So let’s just try what happens if we do 100 pixels. That’s a lot of pixels. But let’s see what happens. So basically, what it did is it takes the image and it makes the width of the image 800 pixels wide. But now maybe we want to have maybe we want to manipulate the height of this and maybe we only want it as 100 pixels.
Alright, so now it’s very distorted, and we really can’t, you know, it doesn’t look good, but we’re more or less, showing you how you can manipulate these background images. So maybe we want to maybe have this more as like a square. So let’s try 800 by 800 pixels. All right. So now we have just basically three two full images are too long, we can almost see full images, and then we have this little sliver over there. Alright, but maybe that’s not really great. We’d be we just want to have just bigger squares. Let’s just try 100 by 100.
Right now we just have a bunch of these little squares. So that’s how you manipulate the pixels. Let’s try a percentage. Let’s do percentage for some.
So basically what we’re having now is that the whole the whole width of it is 100%, but only 100 pixels tall. So let’s try 100% by 100% and now you are able to have the image cover pretty much full screen.
But now what happens if you want to just maybe 50%.
You also too as you can have you can have larger percentages than what is a lot on screen. So if we’re talking about this is 100% from left to right, and 100% from top to bottom, right, we just covered all that. But if we said we wanted 500 pixels, we’ll only 20% but it would be cut of this picture will be covered here. So you would reuse your percentages. You always want to keep like you know, maybe point 01 and 100 Right so at least is on the scale. If you have zero it doesn’t do anything or doesn’t register. Right it’s let’s even just try zero. Let’s see what 0% does.
No, nothing. You can’t say anything, right? So if we did it baby point one right? You just have like a bunch of these little ones over here, right? Kind of kind of almost looks like matrix but um, so that’s basically what percentages do now let’s try cover.
Cover basically just covers as wide, the whole screen as wide as it can. And it basically like a came over here and we’re not seeing the whole image, but it just makes sure that image covers the whole body. So it’s not necessarily the best but it depending on your image size and what you’re trying to do. It could work very, very well or this property could maybe distort a little bit or maybe not get the positioning that you want. Let’s try contain good team. Basically we’re we’re getting the image as the sizing that it wants. Or like the we’re getting the image as large as we can without changing it distorted or changing this actual original dimensions. So basically it went as wide as tall as it possibly could. And then it started a new one. So if we went and said we did the background repeat.
No repeat Pete right there just got the image as large as it possibly could without duplicating it if we have no repeat on now we do have repeat on it’ll just keep duplicating it, but basically it got the image as large as it possibly could before it before it started repeating. So that’s something that you might be able to play with. When you’re saying a background images. And again, like a lot of this is really comes down to what image are you using in the background? Right if you have a image that’s super long, but super long, but very short. You’re gonna have to play with how you’re sizing that differently than if you had a square or if you had a super thin and super tall image, right? So these are just ways that you can manipulate this and again, it’s all going to take time to learn this and play around with it. And again, the there’s no one size fits all every time I set up a background image on something I’m always constantly playing with it. Am I you know, do I want to position over here? What size do we want? Do I need to edit the actual photo before I read put it back in there so I can actually manipulate a little bit better. There’s a lot that goes into image editing and that’s why I’m having a whole section just dedicated to that and how we can work through making sure that all of our pictures just look amazing on our sites. But when you’re going in and you’re you’re when you’re in WordPress and you’re leveraging different aspects of someone else’s code right there, there’s people who build these WordPress themes and we’re just trying to go in and manipulate things to our benefit.
Really, that all this depends on how they set it up and how you want to look and more times than not the developers have it set up to where it’s going to work for a majority of your photos anyways, so it’s not going to take too much work to make it look at a random we’re just using a random picture that we found off the internet when we start getting into WordPress and we’re actually building out these these sites that we have a lot more control and functionality over all these things and it’s it ends up becoming a really powerful tool and what is the whole point of us going through and learning these small nuances of these properties and values are that you’re going to run into is eventually going to run in some of these properties. And you’re going to want to be able to know that if I do this or I can try this I will get this result. So that’s what this this section is all about in this this whole lesson is all about how we can manipulate these things and what each of these value properties and values, what are they going to give us. So that being said I want to go into another section. I want to stop this section right here. Because if you’re coming back and looking at this again, and you’re trying to figure out the background size you can right now this next section I’m gonna go how we can not only work with the background, repeat the background position, but the background size and how they all work together so we can manipulate this background to the way we want. So that’d be instead we’re going on to the next section.