HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python Contents
Defining the CSS background position
The CSS background-position property is used to specify the initial position for the background image:
body {
background-image: url('fruit-citrus.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
}If you're using multiple background images, you can define a different position for each one.
The background position syntax
The syntax for the CSS background-position property is rather intuitive:
background-position: value;
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Property values
| Value | Description | Example |
|---|---|---|
| Keywords | Vertical: top (100%) or bottom (0%)Horizontal: left (0%), center (50%) or right (100%) |
background-position: center; |
| Percentages | The X% point of the image will be aligned with the X% point of the container | background-position: 10% 15%; |
| Length units | The image moves the specified distance | background-position: 3cm 50px; |
You can define up to four property values. Usually, two values are defined for horizontal and vertical CSS background image position:
body {
background-image: url('fruit-citrus.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 40% 30%;
}Declaring just one value for the CSS background-position property defines the horizontal offset, and the vertical offset is set to center by default.
You can also combine keywords with numeric values to define the background position in CSS. This way, you have to define four values (two keyword–number pairs) in total. If you skip a numerical value, it will be set to 0 by default:
body {
background-image: url('fruit-citrus.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left 60px top;
}Browser support
Chrome
Edge
Firefox
IE
Opera
Safari
Mobile browser support
Chrome
Firefox
Opera
