CSS Background

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

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

Background color

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

Example Try this code »

<!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!

Example Try this code »

<!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.

Example Try this code »

<!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>

5 . CSS beautiful buttons
6 . Change property using Attribute Selector
7 . Create Simple Login Form
8 . Create Bootstrap 4 Spinner

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors