Backgrounds in CSS

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


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>


Backgrounds in CSS Part-6 PDF

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad