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:
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
<!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!