CSS background position is a property in CSS that lets you position the background of a web page or elements with creative designs. For instance, you can use this property to properly position a background image. With this property, you get a lot of freedom when placing background elements anywhere you want.
Read on to learn how you can use the background-position property to position background elements.
Contents
CSS Background Position Essentials
CSS gives you a lot of flexibility when positioning your background image. How the background-position property values apply follows a certain order. The first value sets the horizontal position while the second value defines the vertical position.
You can use constants, percentages, or pixels to set the CSS background image position. In practice, browsers accept the order of constant values either way.
– Constant Values
The possible constant values for the background-position property include:
- top right
- top center
- top left
- bottom right
- bottom center
- bottom left
- center right
- center center
- center left
– Example of Using Constant to Position Background Image
Say the body of your web page has a background image and you wish to position it top center.
You can accomplish this like so:
| body { background-image: url(https://images.pexels.com/photos/1660037/pexels-photo-1660037.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-position: top center; } |
– Using Percentage Values
With CSS, you can use percentage values to control the background position of the image. This way, you get to define the position using x percent and y percent. Keep in mind that the first value (x percent) sets the horizontal position while the second value (y percent) sets the vertical position.
For instance, you can position the image to the top left using percentages.
This is the default value and you can set it like so:
| background-position: 0% 0%; |
Using percentages you can position the background image in the previous example as follows:
| body { background-image: url(https://images.pexels.com/photos/1660037/pexels-photo-1660037.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-position: 25% 50%; background-repeat: no-repeat; /* Ensures the image does not repeat*/ } |
The first value (25 percent) controls the vertical alignment so it pushes the image further up the page, while the second value (50 percent) centers the image. Therefore, you can use CSS align background image with percentages to meet your design preferences.
- Note: When using percentages, nothing will happen if the size of the image and container is the same; all the positions will be equal. For instance, the top left is already set as the top left of the container. The golden rule when using percentage values is to ensure the size of the image is different from the size of the container.
– How to Center Background Image Using Percentages
You can use percentages to have a centered background image like so:
| body { background-image: url(https://images.pexels.com/photos/1660037/pexels-photo-1660037.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-position: 50% 50%; background-repeat: no-repeat; /*Ensures the image does not repeat*/ } |
– Using Pixels to Position Background Elements
CSS also lets you define the position of an element using pixels. So, you will need to calculate the pixels you need to control the position of the background image.
The reference point for the pixel value is the top left corner, which is similar to using top/left to position the element. Keep in mind that other units such as ch and em behave just like pixels. These are known as length values and each length value is converted to pixels.
With these values, you can let CSS move background image relative to the top left position. In the previous example, you can use pixels to position the image like so:
| body { background-image: url(https://images.pexels.com/photos/1660037/pexels-photo-1660037.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-position: 25px 50px; background-repeat: no-repeat; } |
The first value (25 pixels) pushes the image to the right with the second value (50 pixels) pushing the image down in the vertical alignment. Moreover, using pixels provides you a precise way of controlling alignment especially when perfection is important.
How to Center Background Image CSS: Using Constant Values
You can also set the position of the background image to the center as follows:
| body { background-image: url(https://images.pexels.com/photos/1660037/pexels-photo-1660037.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-position: center center; background-repeat: no-repeat; /*Ensures the image does not repeat*/ } |
How To Animate Background Image
Besides positioning the background image, you can animate it in CSS.
Here is how to move background image CSS style while animating it:
| body { background-image: url(https://images.pexels.com/photos/1660037/pexels-photo-1660037.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-position: 0% 0%; background-repeat: no-repeat; /*Ensures the image does not repeat*/ position: relative; animation: back 5s infinite linear alternate; } @keyframes back{to{background-position: 100% 100%;}} |
Positioning Background Gradients
Browsers consider gradients to be images by default. If you fail to set the background size, the gradient will fill the container without using an image. Moreover, this is an issue you will face as a developer when handling gradients.
Since an image has intrinsic values, in most cases its size will be different from the size of the container. Thus, setting the background position using percentages will have an effect. However, gradients lack intrinsic values so the dimensions of the gradient will be the same as that of the container.
Unless you specify a background size that is different from the dimensions of the container, then using percentage values to position the gradient will never work. Another golden rule is this: when using percentages with gradients, ensure you define a background size.
Here is how you can set a gradient background and animate it in CSS.
| body { width: 450px; height: 450px; background: linear-gradient(to right,red,green) -50% 0/100px 350px no-repeat; animation: change 2s linear infinite alternate; } @keyframes change{ to{background-size: 750px 350px}; } Notice the syntax below: background: linear-gradient(to right,red,green) -50% 0/100px 350px no-repeat; This means: background: [gradient or image] [background-position]/[background-size] no-repeat |
Combining Percentage and Pixel Values
You can use the calc() function to do complex calculations that use different units. For instance, if you set the width of an element like so:
- width: calc(120px + 15% + 10em);
Here, the browser is going to compute the value by taking into account how each unit works. In this case, you will end up with a pixel value. However, when you set the background position like so:
- background-position: calc(50% + 50px)
The result will use both units so there will be no conversion to either a percentage value or pixel value. When you combine pixel and percentage values inside calc() for the background-position property, it results in a special behavior.
Here is the interpretation of the above example:
- The browser will first position the image using the percentage value using the logic associated with percentage values
- Then using the position of (1) as the reference point, the browser will apply the pixel value to move the image by executing all the logic associated with pixel values.
In this case, setting the background-position property to calc(fifty percent + fifty pixels) will center the image and move it by fifty pixels to the left. Using this function, you can simplify many calculations.
– Example of Combining Both Percentage and Pixel Values
In this example, it would take a lot of effort to get the right pixel or percentage value to position the four blue squares below. However, combining both using the calc() function is a lot easier:
| body { width: 500px; height: 500px; display: inline-block; background-image: linear-gradient(blue,blue), linear-gradient(blue,blue), linear-gradient(blue,blue), linear-gradient(blue,blue); background-size: 125px 125px; background-position: calc(50% + 125px) 50%, calc(50% – 125px) 50%, 50% calc(50% – 125px), 50% calc(50% + 125px); background-repeat: no-repeat; transition: 0.4s; } body:hover{ background-position: 50%; } |
Regardless of how complex the formula is, browsers will always evaluate pixel and percentage values separately.
Using Background Origin
Another important property you can use to alter the position of a background image is background-origin. Moreover, this property depends on the box model and each element consists of three different boxes within it. These are border box, padding box, and content box. With the background-origin property, you get to specify the box to consider.
– Example of Using the Background Origin Property
In this example, you will be setting the background of a <div> element with id name “bg”. First, here is the HTML code for it:
| <body> <div id = “bg”> </div> </body> |
Now, using the background-origin property you can set the position of the background image like so:
| #bg { display: inline-block; height: 250px; width: 250px; background: url(https://images.pexels.com/photos/1660037/pexels-photo-1660037.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260) no-repeat; border: 25px solid rgba(0,0,0,0.1); padding: 25px; background-origin: border-box; } |
If you do not declare padding, the content box is equal to the padding box. Also, when you fail to define the border, the border box is equal to the padding box. And when you do not set padding and border, then all three are the same.
Conclusion
This background-position guide provides you with a remarkable starting point on how to use CSS to position background elements. Hopefully, this introduction piques your interest to dive deeper into web design. Here is a recap of the guide:
- The background-position property lets you position background elements.
- You can use constants, percentages, or pixels to set the background position.
- The values are in pairs of two and apply in order.
- The first value sets the horizontal position.
- The second value sets the vertical position.
- Constant values include values like top right, bottom center, and center center.
- The reference point for the pixels value is the top left.
- For percentage values, the reference point is within the image and the container.
Keep experimenting with the different position values and combine them with other CSS properties to achieve your desired result on your web page!
