Open In App
Related Articles

CSS Background

Improve Article
Improve
Save Article
Save
Like Article
Like

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: 


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 10 May, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials