What is background?
- As the name suggests backgrounds are used to add background to the HTML elements.
- Using CSS backgrounds we can add background images, and background colors to the HTML elements.
- In today's tutorial, we will see how we can add backgrounds and different background properties.
This will be our basic boilerplate code for backgrounds
index.html
<!DOCTYPE html>
<html>
<head>
<title> Backgrounds in CSS </title>
<style>
</style>
</head>
<body>
<p class="bg-para"> This is a paragraph </p>
</body>
</html>
Background Color
- We can simply add background color by color name, hex value, or RGB value.
- In this, we can use predefined color names like red, green, blue, purple, orange, etc.
.bg-para {
background-color: red;
color: white;
}
Output:
This is a paragraph
Output:
Background Image
- Like background color, we can also add images as a background.
- To set images as background we will use the background-image property.
.bg-para {
background-image: url('background.jpg');
}
Output:
This is a paragraph
Background Properties
i) background-position: background-position is used to set the position of the background.
ii) background-repeat: This property is used to set the background repetition.
iii) background-size: It is used to set the size of the background.
iv) background-attachment: This property is used to sets whether a background image's position is fixed within the viewport.
v) background-origin: The background-origin property specifies the origin position of the background.
Background Shorthand Property
p {
background: #fafafa url('background.jpg') no-repeat right top;
}
Background Properties Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Background Shorthand </title>
<style>
p{
background: #fafafa url('background.jpg') no-repeat right top;
}
</style>
</head>
<body>
<p> This is background image paragraph</p>
</body>
</html>
