Skip to content
Related Articles

Related Articles

Improve Article

CSS | Background

  • Difficulty Level : Medium
  • Last Updated : 03 Jul, 2021

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:

html




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

html




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

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:

html




<style>
    body {
        background-repeat: repeat-x;
    }
</style>
 
<body>
    <h1>"Hello world"</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: 

html




<style>
body{
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-position:left top;
}

Example: 

html




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

OUTPUT: 

 

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
     



My Personal Notes arrow_drop_up
Recommended Articles
Page :