CSS Background Position

CSS background-position is a property used to control the positioning of a background image within the background area of an HTML element.

It allows you to specify the horizontal and vertical placement of the image.

You can specify the positioning using keywords (left, right, top, bottom) or specific coordinates (%) . Here are some common values:

• The center center: Positions the background image at the center both horizontally and vertically.
• The left top: Aligns the background image to the top-left corner.
• The right bottom: Aligns the background image to the bottom-right corner.
• The 50% 25%: Positions the background image 50% from the left and 25% from the top.

Aligned to Bottom-Right Corner:

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-position: right bottom;
    background-repeat: no-repeat;
}

        
    

Aligned to Top-Left Corner::

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-position: right bottom;
    background-repeat: no-repeat;
}

        
    

Custom Positioning:

        
            body {
    background-image: url('/images/common/background.jpeg');
    background-position: 50% 25%;
    background-repeat: no-repeat;
}

        
    

This example positions the background image at 50% from the left and 25% from the top of the background area.