CSS Background
The CSS background property is used to define the background effects on elements. Different types of background properties:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS background-color:
The property is used to set the background color of an element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #9999ff;
}
</style>
</head>
<body>
<h2>First CSS page.</h2>
<p>Hello i2tutorials. This is an example of CSS background-color.</p>
</body>
</html>
OUTPUT:
CSS background-image:
The property is used to set an image as a background of an element. By default, the image covers the entire element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello I2Tutorials.com</h1>
</body>
</html>
OUTPUT:
CSS background-repeat:
This property repeats the background image horizontally and vertically. Some images are repeated only horizontally /vertically.
The web page background looks better if the image repeated horizontally only.
background-repeat: repeat-x;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient-bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello I2tutorial.com</h1>
</body>
</html>
OUTPUT:
background-repeat: repeat-y;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient-bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello I2tutorials.com</h1>
</body>
</html>
OUTPUT:
CSS background-attachment:
This property is used to specify if the background image is fixed or scroll with the rest of the page in the browser window. If you set fixed the background image then the image will not move during scrolling in the window browser. Let’s take an example with a fixed background image.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;
margin-left:200px;
}
</style>
</head>
<body>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
</body>
</html>
OUTPUT:
CSS background-position:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<p>This is a fixed background-image.</p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
<p>This is a fixed background-image. </p>
</body>
</html>
OUTPUT:
