Web developers use the CSS background-position property when they need to adjust the starting position for the background image they are working with. In this article, we’ll take a look at the background-position property and how to adjust it to change the position of your image.
Syntax
The syntax for the background-position property inside a CSS selector is as follows:
background-position: value
There are a couple of different ways to declare the value on the background-position:
- There are several keyword pair values that can be used:
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottom
The first word represents the horizontal, or x, axis. The second word represents the vertical, or y, axis. If only one value is declared, the y-value is automatically set to ‘center’.
- x%, y%:
Similar to the first option, you can specify up to two values: one for the horizontal position on the x-axis, one for the vertical position on the y-axis. If only one value is given, the y% value is set to 50% to center the image on the y-axis. Left top is 0% 0%, top right is 100% 0%, bottom left is 100% 0% and bottom right is 100% 100%.
- xpos, ypos (in px/rem/em/pt):
Also similar to the previous two options, but the numbers are given in CSS units instead of percent (although you can mix percent and rem/em/px/pt if you’d like). If no second value is given, the ypos is set to 50%;
Here is some examples that shows the different values using the first option:
Top Left:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Top Left</title> <style> body { background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top left; display: flex; flex-flow: row wrap; } div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> <div id="text-block"> top left </div> <div> </div> <div> </div> <div> </div> <div> </div> <script src="script.js"> </script> </body> </html>
Center Right:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Center Right</title> <style> body { background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center right; display: flex; flex-flow: row wrap; } div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> <div id="text-block"> center right </div> <div> </div> <div> </div> <div> </div> <div> </div> <script src="script.js"> </script> </body> </html>
Bottom Left:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bottom Left</title> <style> body { background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: bottom left; display: flex; flex-flow: row wrap; } div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } </style> </head> <body> <div> </div> <div> </div> <div> </div> <div> </div> <div id="text-block"> bottom left </div> <div> </div> <div> </div> <div> </div> <div> </div> <script src="script.js"> </script> </body> </html>
Conclusion
Hopefully the code editors above give you a sense of how you can use the background-position property in your CSS. Play around with it – change the background image used here, change up the position – just to see what can be done!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.