Advertisement

Advertisement


CSS Background

CSS background property provide styling to the background of the HTML elements. Some properties are:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Background color

The background-color property specifies the background color of an element.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Background </title>
<meta charset="UTF-8">
<style>
body {
background-color: pink;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a pink background color!</p>
</body>
</html>

Output

CSS Background

Hello World!

This page has a pink background color!



<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Background Color </title>
<meta charset="UTF-8">
<style>
h1 {
background-color: seagreen;
padding:10px;
}
p {
background-color: lightblue;
padding:10px;
}
</style>
</head>
<body>
<h1> CSS background-color example!</h1>
<p> This paragraph has its own background lightblue color.</p>
</body>
</html>

Output

CSS Background Color

CSS background-color example!

This paragraph has its own background lightblue color.


Background Image

The background-image property sets an image in the background of an element.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Background Image </title>
<meta charset="UTF-8">
<style>
body {
background-image: url("image.png");
}
</style>
</head>
<body>
<h1> CSS background-image example! </h1>
<p> This is an example of Background Image. </p>
</body>
</html>









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.