Open In App
Related Articles

CSS Background

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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: This example shows the use of the background-color property in CSS.

HTML

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

                    

Output: 
 

Background Image Property: This property specifies 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: This example shows the use of the background-image property in CSS.

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: This example shows the use of the background-repeat property in CSS.

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: This example shows the use of the background-attachment property in CSS.

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: This example shows the use of the background-position property in CSS.

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: 



Last Updated : 10 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads