Quick Links
CSS Background property is used to define the background effects on element. There are 5 background properties that affects the HTML elements:
i. background-color
ii. background-image
iii. background-repeat
iv. background-attachment
v. background-position
1.background-color
The background-color property is used to specify the background color of an element.
Example:
<!DOCTYPE html>
<html>
<head>
<style> h2,p{ background-color: #b0d4de; } </style>
</head>
<body>
<h2>;My first CSS page. </h2>
<p>Hello Learner's. This is an example of CSS background-color. </p>
</body>
</html> 2. background-image
The background-image property sets one or several background images in an element. Let’s set a background-image for the <body> element.
Example:
<!DOCTYPE html>
<html>
<head>
<style> body { background-image: url("paper1.gif"); margin-left:100px; } </style>
</head>
<body>
<h1>Hello Learner's>/h1>
</body>
</html> 3. Background-repeat
The background-repeat property is used to control the repetition of an image in the background.
Example:
background-repeat: repeat-x;
<DOCTYPE html>
<html>
<head>
<style> body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } </style>
</head>
<body>
<h1>Hello Learner's</h1>
</body>
</html>
Example:
background-repeat: repeat-y;
<!DOCTYPE html>
html>
<head>
<style> body { background-image: url("gradient_bg.png"); background-repeat: repeat-y; } </style>
</head>
<body>
<h1>Hello Learner's</h1>
</body>
</html>
4.CSS Background-attachment
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
Even if an element has a scrolling mechanism, a “fixed” background doesn’t move with the element.
Example:
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed; 5. CSS Background-position
The background-position property is used to control the position of an image in the background.
You can set the following positions:
i. Center
ii. Top
iii. Bottom
iv. left
v. Right
Example:![]()
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
Recommended Posts: