CSS - CSS Background - CSS Background Position



 CSS Background Position

Learn css - css tutorial - CSS Background Position - css examples - css programs

CSS Background position - Definition and Usage

  • In css background position is used to apply the beginning position of the background image.
  • In this, background-image can be fixed at the top-left corner of an element, and repeated both vertical axis and horizontal axis.
CSS background position
  • The Background position property in CSS allows the developers to align the background image anywhere in the web page.

sample html code - html and css

Tryit<!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>
click below button to copy the code. By - css tutorial - team

Code Explanation - stylesheet css

css center image
  1. 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.
  2. Here, by using repeat property, we can avoid appearing of image several times.
  3. 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).

Code Output - html and css training course

    html and css tutorial
  1. The text “Welcome to Wikitechy!” was displayed in the browser window as shown.
  2. Here, the background image wikitechy.com will be displayed in the RIGHT TOP CORNER of the window.
color background
  • 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.
    1. center image css
    2. The text “Welcome to Wikitechy!” was displayed in the browser window as shown.
    3. Here, the background image wikitechy.com will be displayed in the CENTER OF THE WINDOW.

    This page provides a detailed information on stylesheet css , css input , css menu , css for table , css in js , external css , css maker , html css style , css documentation , css page , css site , css3 websites , html css course , css stylesheets , css web design , css beginner , html to css , learn html css and javascript , css official website.


    View More Quick Examples

    CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

    Related Searches to CSS - Background Position