CSS Background Color

background property is used to background effects on element or page.

Types of Background Property

There are Five CSS background properties that is.

background-color
background-image
background-repeat
background-attachment
background-position

1) CSS background-color

In CSS the background-color property is define the background color of the element.

<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
    background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>HTML.</h2>
<p>CSS.</p>
</body>
</html> 

Test it Now

Output:

HTML.

CSS.

2) CSS background-image

The background-image property is used to set an image as a background of an element.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/images/logo/elibraryportal.png");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html>     

Test it Now

3) CSS background-repeat

background-image property repeats the background image horizontally and vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("/images/men2.gif");
    background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html> 

Test it Now

background-repeat: repeat-y;

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("/images/men2.gif");
    background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html> 

Test it Now

4) CSS background-attachment

The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. If you set fixed the background image then the image will not move during scrolling in the browser.

background: white url('/images/men2.gif');
background-repeat: no-repeat;
background-attachment: fixed;

Test it Now

5) CSS background-position

background-position property is used to initial position of the background image.the background image is placed on the top-left of the webpage.

Some following positions are:

top
bottom
center
left
right

background: white url('/images/logo/elibraryportal.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; 

Test it Now

Next TopicCSS Border

← prev next →

CSS Tutorials

CSS Properties

CSS Background Color

Types of Background Property

1) CSS background-color

HTML.

2) CSS background-image

3) CSS background-repeat

4) CSS background-attachment

5) CSS background-position