View video tutorial
CSS Background Position
CSS
This property sets the starting position of a background image.
CSS background-position property
➔ The background-position property specifies the starting position of a background image.
Example (center)
body {
background-image: url('resources/images/cat-cartoon2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example (center top)
body {
background-image: url('resources/images/cat-cartoon2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}Click on the "Try it Now" button to see how it works.
Example (bottom right)
body {
background-image: url('resources/images/cat-cartoon2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}Click on the "Try it Now" button to see how it works.
Example (50% 50%)
body {
background-image: url('resources/images/dog-cartoon2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}Click on the "Try it Now" button to see how it works.