What is Web Page Backgrounds
CSS offers robust properties to personalize the background of elements on a webpage.. These properties allow developers to set colors, images, gradients, and other visual effects for the background, enhancing the look and feel of a website.

Common CSS Background Properties

background-color

Sets the background color of an element.

div {
background-color: blue; /* blue background */
}

background-image

Sets an image as the background of an element.

div {
background-image: url('img.jpg'); /* Adds image as the background */
}

background-repeat

Defines whether the background image should repeat or not.

Values:

repeat-x: Repeats the image horizontally.
no-repeat: Displays the image once without repeating.
repeat (default): Repeats both horizontally and vertically.
repeat-y: Repeats the image vertically.

div {
   background-image: url('pic.png');
     background-repeat: no-repeat; /* Image will not repeat */
     }

background-size

Sets the size of the background image.

Values:

cover: Adjusts the image to fill the entire element, ensuring no empty spaces, even if it means some parts of the image may be cropped.

contain: Scales the image to fit completely within the element, ensuring the entire image is visible, but this may leave empty spaces if the aspect ratios don't match.

Specific dimensions (50px 100px).

div {
background-image: url('Image.jpg');
background-size: cover; /* Image covers the element */

}

background-position

Specifies the starting position of the background image.

Values:

Keywords (top, center, bottom, left, right).

Coordinates (50% 50%, 10px 20px).

div {
background-image: url('background.jpg');
background-position: center; /* Image Centers in background */

}

background-attachment

Determines whether the background moves along with the page as it scrolls or remains stationary in its position.

scroll (default): Background scrolls with the page.
fixed: Background stays in place while the content scrolls.

div {
     background-image: url('Imahe.jpg');
     background-attachment: fixed; /* background fixed */
     }

background (Shorthand)

A shorthand property that allows you to define multiple background-related properties, such as color, image, position, size, and more, in a single declaration.

Syntax:

background: [color] [image] [repeat] [attachment] [position] / [size];

div {
background: lightblue url('Images.jpg') no-repeat center / cover;
}

Example: CSS Background in Action

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Example</title>
<style>
body {
       background-color: rgb(143, 87, 255);
       font-family: 'Times New Roman', Times, serif;
       margin: 10px;
       padding: 10px;
   }
.box {
       width: 100%;
       height: 100%;
       background: url('seening.jpg') no-repeat center / cover;
       text-align: center;
       line-height: 150px; /* Line height 150px */
       color: rgb(243, 255, 25);
       font-size: 1.3em;
       }
</style>
</head>
<body>
<div class="box">
You can see Background image in this box.
</div>
</body>
</html>

Output

Key Notes:

Background properties can be applied to most HTML elements.
When using background-image, ensure the image file is accessible and properly linked.
For responsive designs, background-size: cover is often preferred.

By leveraging these background properties, you can create visually compelling web pages with custom colors, images, and effects.

What is Web Page Backgrounds

What is Web Page Backgrounds
CSS offers robust properties to personalize the background of elements on a webpage.. These properties allow developers to set colors, images, gradients, and other visual effects for the background, enhancing the look and feel of a website.