Skip to content
Related Articles

Related Articles

CSS Background

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

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!