body{
background-repeat: no-repeat;
background-position: left top;
background-position: 50% 50%;
background-position: 50px 50px;
}
				
			

				
					
body{
background-repeat: no-repeat;
background-position: left top;
}
				
			

				
					
body{
background-repeat: no-repeat;
background-position: 50px 50px;
}
				
			

Video Summary

All right in this section we’re going to talk about the background position. And this is where you can essentially play precisely placed the background image on a certain section or body or certain element that you are having a background image on. Now note for this to work you need to have the background image as no repeat. If the background image is repeating, you won’t be able to place that image where you want to. Alright, so I’m gonna go through each one of these sections, like basically you can set it up as directionally ascending, you want to do that left at the top left or, or the left top or center center. You can say background position is 50% 50%. Meaning you’re actually having that image right in the middle of where you have the background or you can have it as a pixelization to actually get it to right where you need it to be. 

So direction is basically how we can say if we want to add the laptop or the right bottom or the center center. So these are the values you can use. And basically we have to work from the upper left hand corner all the way to the bottom right hand corner. That’s how these are set up. So you either have to have the left first, right first or the center first and that’s talking about the direction the right and left and then the top, bottom and center is more or the vertical. 

No percentage. It works on the same way, but it’s talking about what percentage do you want this image at so if you’re at 00, you’re at the top left if you’re at zero to 100, you’re at the top right. If you’re at 100, zero, you’re at the bottom lap. If you’re at 100 and 100, you’re at the bottom right and if you’re 5050, you’re using a center center, so percentages are probably more the way to go. If you’re trying to position that background image to a certain spot because it will look good on all devices versus of trying to the the directional version of this or the background position. can get you generally where you want to go but it’s not as precise. Now percentages if especially if you want it center doing like 50% 50% will get you exactly in the center of the background every single time. Doesn’t matter what device you’re on. But now if you really want to be really technical and you want to just just a little bit far off, you can use pixels, but note that the pixels go are pushing it down or are pushing it down and last by exactly the number of pixels that you choose. So for instance, if you if you wanted to put the or if you wanted to do 1010. Basically, if you’re at the top left of your screen, if you follow my cursor, you’d be 10 pixels over 10 pixels down. Now if you’re 100 pixels by 50 pixels, you’re 50 pixels over here. 50 pixels down, and basically you just start moving your image down you know, down and down and write as the more pixels you have. Now this will work good if you want to have an image right behind at the top of a paragraph or in a certain section. But also to is if you’re trying to use pixels that have in the middle of the page. It might be the middle of page that you’re seeing but someone might have it might be looking at it from a mobile device and it might you know, the, the pixels that it takes to get to the center screen will be the same it will take for a mobile device or a tablet or even a smaller computer. So let’s just hop in and just show you what the background position does and how we can manipulate that there. And remember too is you need to have the no repeat on for this to work. So let’s hop in a coat then and see what we can do.