Background CSS

Background property sets background color or background image of HTML Elements.

Following are the CSS background properties:

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

Background Color of HTML Element – css

To set background color of an HTML Element use CSS background-color property

<html>
<head>
<style>
body {
    background-color: lightblue;
}
</style>
</head>
<body>
</body>
</html>

Background Image of HTML Element – css

To set background image of an HTML Element use CSS background-image property

<html>
<head>
<style>
body {
    background-image: url("imagepath.png");
}
</style>
</head>
<body>
</body>
</html>

By Default image is set to repeat itself in horizontal & vertical coordinates.

Repeat background image with css

To repeat an image in a particular axis( horizontal & vertical) use background-repeat property. If background-repeat property is not specified, image will repeat itself in x and y directions.

Repeat image in x axis

Repeat image in x-axis repeats image Horizontally.

<html>
<head>
<style>
body {
        background-image: url("imagepath.gif");
	background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>

Repeat image in y axis

Repeat image in x-axis repeats image Vertically.

<html>
<head>
<style>
body {
        background-image: url("imagepath.gif");
	background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>

Repeat image in both directions

background-repeat: repeat; whereas repeat is default value, allows to repeat image in both directions.

<html>
<head>
<style>
body {
        background-image: url("imagepath.gif");
	background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>

No Repeat background image: css

<html>
<head>
<style>
body {
    background-image: url("imagepath.gif");
     background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>

Fixed background images – css

To make an image fixed use background-attachment property. Image will not move while page scrolling.

<html>
<head>
<style>
body {
    background-image: url("imagepath.gif");
	background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>

background-position – css

Bydefault background image is positioned top-left. To set th background image position use background-position property.

Following are the positions a background image can set to:

center
top
bottom
left
right

Example

<html>
<head>
<style>
body {
    background: white url('good-morning.jpg');  
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    background-position: center;   
}
</style>
</head>
<body>
</body>
</html>