Skip to content
Related Articles

Related Articles

CSS Background

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 07 Oct, 2021
View Discussion
Improve Article
Save Article

The CSS background properties are used to define the background effects for elements. There are lots of properties to design the background. 
CSS background properties are as follows: 

Background color Property: This property specifies the background color of an element. A color name can also be given as : “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”. 
Syntax:

body {
   background-color:color name
}

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <h1>Geeksforgeeks</h1>
</body>
 
</html>


Output: 
 

Background Image Property: 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




<!DOCTYPE html>
<html>
 
<head>
 
    <style>
        body {
            background-image:
        }
    </style>
</head>
 
<body>
    <h1>Geeksforgeeks</h1>
</body>
 
</html>


Output: 
 

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

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

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            background-image:
            background-repeat: repeat-x;
        }
    </style>
</head>
 
<body>
    <h1>"Hello world"</h1>
</body>
 
</html>


Output:

Background-attachment Property: 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




<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            background-image:
            background-attachment: fixed;
        }
    </style>
</head>
 
<body>
    <h1>Geeksforgeeks</h1>
</body>
 
</html>


Output: 

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

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

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        body {
            background-image:
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
 
<body>
    <h1>Geeksforgeeks</h1>
</body>
 
</html>


Output: 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!