Tutorialspoint.dev

CSS | Background

The CSS background properties are used to define the background effects for elements.

Css background properties are as follows :

  1. Background-color
  2. Background-image
  3. Background-repeat
  4. Background-attachment
  5. Background-position
  1. Background color : This property specifies the background color of an element.
    Syntax :

    body
    {
       background-color:color name
    }

    A color name can also be given as : “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”.
    Example :

    <style>
    h1{
    background-color: blue;
    }
    </style>
    <body>
    <h1>
         Geeksforgeeks
    </h1>
    </body>

    
    OUTPUT:
    
    
    
  2. Background Image : This property specify an image to use as the background of an element. By default, the image is repeated so it covers the entire element.
    Syntax:



    body
    {
       background-image : link;
    }

    Example:

    <style>
    body{
    background-image:url(..//images/pexels-photo-370799.jpeg);
    }
    </style>
    <body>
    <h1>
    Geeksforgeeks
    </h1>
    </body>

    
    OUTPUT:
    
    

  3. Background repeat : By default the background image property repeats the image both horizontally and vertically.
    To rotate an image horizontally:
    Syntax:

    body
    {
       background-image:link;
       background-repeat: repeat:x;
    }
    

    Example :

    <style>
    h1{
    background-image:url("paper.gif");
    background-repeat: repeat-x;
    }
    </style>
    <body>
    <h1>
    "Hello world"
    </h1>
    </body>

    
    OUTPUT:
    
    


    To rotate an image vertically:

    Syntax :

    body
    {
       background-image:link;
       background-repeat: repeat:y;
    }

    Example:

    <style>
    body{
    background-image:url("paper.gif");
    background-repeat: repeat-y;
    }
    </style>
    <body>
    <h1>
    Geeksforgeeks
    </h1>
    </body>

        
    OUTPUT:
    
    

  4. Background-attachment : This property is used to fix the background ground image.The image will not scroll with the page.
    Syntax:

    body
    {
       background-attachment: fixed;
    }

    Example:

    <style>
    h1{
    background-image:url("paper.gif");
    background-attachment:fixed;
    }
    </style>
    <body>
    <h1>
    Geeksforgeeks
    </h1>
    </body>

    
    OUTPUT:
    
    

  5. Background-position : This property is used to set the image to a particular position.
    Syntax :

    body
    {
       background-repeat:no repeat;
       background-positon:left top;
    }

    Example:

    <style>
    h1{
    background-image:url("paper.gif");
    background-repeat:no repeat;
    background-position:left top;
    }
    </style>
    <body>
    <h1>
    Geeksforgeeks
    </h1>
    </body>

    
    OUTPUT:
    
    



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter