Related Articles

Related Articles

CSS | Background
  • Difficulty Level : Medium
  • Last Updated : 08 Jul, 2019

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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
    body{
    }
    </style>
    <body>
    <h1>Geeksforgeeks</h1>
    </body>                    

    chevron_right

    
    

    OUTPUT:

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

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        body {
            background-repeat: repeat-x;
        }
    </style>
      
    <body>
        <h1>"Hello world"</h1>
    </body>

    chevron_right

    
    

    OUTPUT:

  4. To repeat an image vertically:

    Syntax:

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
    body {
        background-repeat: repeat-y;
    }
    </style>
      
    <body>
        <h1>"Hello world"</h1>
    </body>                    

    chevron_right

    
    

    OUTPUT:

  5. 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
    body{
    background-attachment:fixed;
    }
    </style>
    <body>
    <h1>Geeksforgeeks</h1>
    </body>                    

    chevron_right

    
    

    OUTPUT:

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

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

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
    body{
    background-repeat:no-repeat;
    background-position:center;
    }
    </style>
    <body>
    <h1>Geeksforgeeks</h1>
    </body>                    

    chevron_right

    
    

    OUTPUT:




My Personal Notes arrow_drop_up
Recommended Articles
Page :