CSS - Background-Position


CSS - Background Position

  • The Background position property in CSS allows the developers to align the background image anywhere in the web page.

Sample Code :

<!DOCTYPE html>
<html>
<head>
    <style>

        body {
            background-image: url("http://www.wikitechy.com/img/logo.png");
            background-repeat: no-repeat;
            background-position: right top;
        }
    </style>
</head>
<body>

    Welcome to Wikitechy!
</body>
</html>

Code Explanation :


    The background-image property specifies an image to use as the background image for the element. URL specifies the location path of the background image.

    Here, by using repeat property, we can avoid appearing of image several times.

    background-position: right top; will display the image at the right corner of the output browser window.

Note : Similarly, we can fix the image anywhere (left top and center).

Output :

 

    The text “Welcome to Wikitechy!” was displayed in the browser window as shown.

    Here, the background image wikitechy.com will be displayed in the RIGHT TOP CORNER of the window.

 

    The text “Welcome to Wikitechy!” was displayed in the browser window as shown.

    Here, the background image wikitechy.com will be displayed in the LEFT TOP CORNER of the window.


    The text “Welcome to Wikitechy!” was displayed in the browser window as shown.

    Here, the background image wikitechy.com will be displayed in the CENTER OF THE WINDOW.