From e7e28df14f770c53154fc052682812b62a8bd830 Mon Sep 17 00:00:00 2001
From: Ajay-Dhangar <ajaydhangar49@gmail.com>
Date: Mon, 27 Jan 2025 18:32:46 +0530
Subject: [PATCH] bg content added

---
 docs/css/backgrounds/_category_.json          |   8 +
 docs/css/backgrounds/background-color.md      | 113 ++++++++++++++
 .../background-image/_category_.json          |   8 +
 .../background-image/background-attachment.md | 134 ++++++++++++++++
 .../background-image/background-position.md   | 144 ++++++++++++++++++
 .../background-image/background-repeat.md     | 137 +++++++++++++++++
 .../background-image/background-size.md       | 134 ++++++++++++++++
 7 files changed, 678 insertions(+)
 create mode 100644 docs/css/backgrounds/_category_.json
 create mode 100644 docs/css/backgrounds/background-image/_category_.json

diff --git a/docs/css/backgrounds/_category_.json b/docs/css/backgrounds/_category_.json
new file mode 100644
index 000000000..cbc33a56b
--- /dev/null
+++ b/docs/css/backgrounds/_category_.json
@@ -0,0 +1,8 @@
+{
+    "label": "Backgrounds",
+    "position": 4,
+    "link": {
+      "type": "generated-index",
+      "description": "In this section, you will learn about the CSS Backgrounds. CSS backgrounds are used to specify the background of an element. You can specify backgrounds using different methods such as background-color, background-image, background-repeat, background-attachment, background-position, and more."
+    }
+  }
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-color.md b/docs/css/backgrounds/background-color.md
index e69de29bb..09793e9f7 100644
--- a/docs/css/backgrounds/background-color.md
+++ b/docs/css/backgrounds/background-color.md
@@ -0,0 +1,113 @@
+---
+id: background-color
+title: Background Color
+sidebar_label: Background Color
+sidebar_position: 1
+tags: [background, color, css background, background color]
+description: Learn how to set the background color of an element in CSS using the background-color property.
+keywords:
+  [
+    background color,
+    css background color,
+    background-color property,
+    css background-color,
+  ]
+---
+
+In CSS, the `background-color` property is used to set the background color of an element. The `background-color` property accepts a color value, which can be specified using various color formats such as hexadecimal, RGB, RGBA, HSL, and HSLA.
+
+<AdsComponent />
+
+## Syntax
+
+The syntax for the `background-color` property is as follows:
+
+```css title="index.css"
+selector {
+  background-color: color;
+}
+```
+
+- `selector`: The element to which the background color is applied.
+- `background-color`: The CSS property used to set the background color of an element.
+- `color`: The color value used to specify the background color.
+- The `color` value can be specified using various color formats, such as hexadecimal, RGB, RGBA, HSL, and HSLA.
+- The `color` value can also be specified using color keywords like `red`, `blue`, `green`, etc.
+
+## Example
+
+In the following example, the `background-color` property is used to set the background color of a `<div>` element to a light blue color using the hexadecimal color format:
+
+```css title="index.css"
+div {
+  background-color: #ADD8E6; /* Light blue color */
+}
+```
+
+In the HTML code below, the CSS rule will apply the light blue color to the background of the `<div>` element:
+
+```html title="index.html"
+<div>This is a div with a light blue background.</div>
+```
+
+By using the `background-color` property, you can customize the background color of elements on your web page to create visually appealing designs.
+
+<AdsComponent />
+
+:::info Additional Information
+
+- The `background-color` property sets the background color of an element, covering the entire content area of the element.
+- The `background-color` property can be combined with other background properties like `background-image`, `background-repeat`, `background-position`, etc., to create more complex background effects.
+- When setting the background color of an element, ensure that there is enough contrast between the background color and the text color to ensure readability and accessibility.
+
+:::
+
+## Example for Background Color
+
+In this example, we will set the background color of a `<div>` element using the `background-color` property with an RGB color value:
+
+<Tabs>
+  <TabItem value="HTML" label="index.html">
+
+```html showLineNumbers
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Background Color Example</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div>This is a div with a light green background.</div>
+</body>
+</html>
+```
+
+</TabItem>
+<TabItem value="CSS" label="styles.css">
+
+```css showLineNumbers {2}
+div {
+  background-color: rgb(144, 238, 144); /* Light green color */
+}
+```
+
+</TabItem>
+</Tabs>
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000", padding: "0", minHeight: "200px" }}>
+<>
+    <div style={{backgroundColor: "rgb(144, 238, 144)"}}>This is a div with a light green background.</div>
+</>
+</BrowserWindow>
+
+In this example, the `background-color` property is used to set the background color of the `<div>` element to a light green color using the RGB color format.
+
+By specifying the background color using the `background-color` property, you can enhance the visual appearance of your web pages and create engaging user experiences.
+
+## Conclusion
+
+The `background-color` property in CSS allows you to set the background color of an element using various color formats. By customizing the background color of elements on your web page, you can create visually appealing designs and improve the overall user experience.
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/_category_.json b/docs/css/backgrounds/background-image/_category_.json
new file mode 100644
index 000000000..02a8df9f2
--- /dev/null
+++ b/docs/css/backgrounds/background-image/_category_.json
@@ -0,0 +1,8 @@
+{
+    "label": "Background Image",
+    "position": 2,
+    "link": {
+      "type": "generated-index",
+      "description": "In this section, you will learn about the CSS Background Image. The background-image property sets one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally."
+    }
+  }
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/background-attachment.md b/docs/css/backgrounds/background-image/background-attachment.md
index e69de29bb..7378df4a4 100644
--- a/docs/css/backgrounds/background-image/background-attachment.md
+++ b/docs/css/backgrounds/background-image/background-attachment.md
@@ -0,0 +1,134 @@
+---
+id: background-attachment
+title: Background Attachment
+sidebar_label: Background Attachment
+sidebar_position: 4
+tags: [background, css background, background attachment, background-attachment property]
+description: Learn how to set the background attachment behavior of an element in CSS using the background-attachment property.
+keywords:
+  [
+    background attachment,
+    css background attachment,
+    background-attachment property,
+    css background-attachment,
+  ]
+---
+
+In CSS, the `background-attachment` property is used to specify whether the background image of an element scrolls with the content or remains fixed as the content moves. This property is used to control the attachment behavior of the background image.
+
+<AdsComponent />
+
+## Syntax
+
+The syntax for the `background-attachment` property is as follows:
+
+```css title="index.css"
+selector {
+  background-attachment: value;
+}
+```
+
+- `selector`: The element to which the background attachment behavior is applied.
+- `background-attachment`: The CSS property used to set the background attachment behavior of an element.
+- `value`: Specifies the attachment behavior of the background image. It can take one of the following values:
+  - `scroll`: The background image scrolls along with the content when the content is scrolled.
+  - `fixed`: The background image remains fixed within the viewport as the content is scrolled.
+  - `local`: The background image scrolls along with the element's contents, rather than the entire page.
+  - `initial`: Sets the background attachment behavior to its default value.
+- The default value of the `background-attachment` property is `scroll`.
+
+## Example
+
+In the following example, the `background-attachment` property is used to set the background attachment behavior of a `<div>` element to `fixed`, which makes the background image remain fixed within the viewport as the content is scrolled:
+
+```css title="index.css"
+div {
+  background-image: url('path/to/background-image.jpg');
+  background-attachment: fixed;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `fixed` background attachment behavior to the background image of the `<div>` element:
+
+```html title="index.html"
+<div>This is a div with a fixed background image.</div>
+```
+
+By using the `background-attachment` property, you can control how the background image behaves when the content is scrolled, allowing you to create various visual effects on your web page.
+
+<AdsComponent />
+
+:::info Additional Information
+
+- The `background-attachment` property is often used in combination with the `background-image` property to set a background image and define its attachment behavior.
+- The `background-attachment` property can be used to create effects like parallax scrolling, where the background image moves at a different speed than the content, creating a sense of depth.
+
+:::
+
+## Example for background-attachment property
+
+In this example, we have a `<div>` element with a background image that has the `background-attachment` property set to `fixed`. This makes the background image remain fixed within the viewport as the content is scrolled:
+
+<Tabs>
+  <TabItem value="HTML" label="index.html">
+
+```html showLineNumbers
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Background Attachment Example</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div>
+    <h1>Fixed Background Image</h1>
+    <p>This is a div with a fixed background image.</p>
+  </div>
+</body>
+</html>
+```
+
+</TabItem>
+<TabItem value="CSS" label="styles.css">
+
+```css showLineNumbers {3}
+div {
+  background-image: url('/assets/jpeg-image.jpg');
+  background-attachment: fixed;
+  color: white;
+  text-align: center;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 2em;
+  margin-bottom: 0;
+}
+
+p {
+  font-size: 1.2em;
+  margin-top: 0;
+}
+```
+
+</TabItem>
+</Tabs>
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundImage: "url('/assets/jpeg-image.jpg')", color: "#fff", padding: "20px", minHeight: "200px", textAlign:"center", backgroundAttachment:"fixed" }}>
+<>
+  <h1 style={{ fontSize: "2em", marginBottom: "0" }}>Fixed Background Image</h1>
+  <p style={{ fontSize: "1.2em", marginTop: "0" }}>This is a div with a fixed background image.</p>
+</>
+</BrowserWindow>
+
+In this example, the background image remains fixed within the viewport as the content is scrolled, creating a visually appealing effect on the web page.
+
+<AdsComponent />
+
+## Conclusion
+
+The `background-attachment` property in CSS allows you to control the attachment behavior of the background image of an element. By setting the `background-attachment` property to `fixed`, `scroll`, `local`, or `initial`, you can create various visual effects on your web page. Experiment with different values of the `background-attachment` property to achieve the desired background image behavior for your elements.
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/background-position.md b/docs/css/backgrounds/background-image/background-position.md
index e69de29bb..d3b1d030e 100644
--- a/docs/css/backgrounds/background-image/background-position.md
+++ b/docs/css/backgrounds/background-image/background-position.md
@@ -0,0 +1,144 @@
+---
+id: background-position
+title: Background Position
+sidebar_label: Background Position
+sidebar_position: 3
+tags: [background, css background, background position, background-position property]
+description: Learn how to set the position of the background image of an element in CSS using the background-position property.
+keywords:
+  [
+    background position,
+    css background position,
+    background-position property,
+    css background-position,
+  ]
+---
+
+In CSS, the `background-position` property is used to specify the position of the background image of an element. This property allows you to control the placement of the background image within the element's background area.
+
+<AdsComponent />
+
+## Syntax
+
+The syntax for the `background-position` property is as follows:
+
+```css title="index.css"
+selector {
+  background-position: value;
+}
+```
+
+- `selector`: The element to which the background position is applied.
+- `background-position`: The CSS property used to set the position of the background image of an element.
+- `value`: Specifies the position of the background image. It can take one of the following values:
+  - `top`: Aligns the top edge of the background image with the top edge of the background area.
+  - `bottom`: Aligns the bottom edge of the background image with the bottom edge of the background area.
+  - `left`: Aligns the left edge of the background image with the left edge of the background area.
+  - `right`: Aligns the right edge of the background image with the right edge of the background area.
+  - `center`: Aligns the background image in the center of the background area.
+  - `<percentage>`: Specifies the position of the background image as a percentage of the background area.
+  - `<length>`: Specifies the position of the background image using a length value (e.g., `10px`, `20%`).
+  - `initial`: Sets the background position to its default value.
+  - `inherit`: Inherits the background position from the parent element.
+
+The default value of the `background-position` property is `0% 0%`, which aligns the top left corner of the background image with the top left corner of the background area.
+
+## Example
+
+In the following example, the `background-position` property is used to set the position of the background image of a `<div>` element to `center`, which aligns the background image in the center of the background area:
+
+```css title="index.css"
+div {
+  background-image: url("path/to/background-image.jpg");
+  background-position: center;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `center` background position to the background image of the `<div>` element:
+
+```html title="index.html"
+<div>
+  <p>
+    This is a div with a background image that is centered within the background area.
+   </p>
+</div>
+```
+
+By using the `background-position` property, you can control the placement of the background image within the element's background area, allowing you to create visually appealing designs on your web page.
+
+<AdsComponent />
+
+:::note Try it yourself
+
+You can experiment with different values of the `background-position` property to position the background image in various ways within the background area of an element. Try changing the `background-position` value to `top`, `bottom`, `left`, `right`, or a specific length or percentage to see how the background image placement changes.
+
+:::
+
+
+## Example for Background Position
+
+In this example, we will demonstrate how to use the `background-position` property to position the background image of a `<div>` element to the top right corner of the background area.
+
+### Step 1: Create an HTML File
+
+Create an HTML file named `index.html` and add the following code:
+
+```html title="index.html" showLineNumbers
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Background Position Example</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div>
+    <p>
+      This is a div with a background image positioned at the top right corner.
+    </p>
+  </div>
+</body>
+</html>
+```
+
+### Step 2: Create a CSS File
+
+Create a CSS file named `styles.css` and add the following code to set the background image and position:
+
+```css title="styles.css" showLineNumbers {3}
+div {
+  background-image: url("/assets/jpeg-image.jpg");
+  background-position: top right;
+  height: 200px;
+  width: 400px;
+  border: 1px solid #333;
+  background-size: cover; color: #fff;
+}
+
+p {
+  padding: 10px;
+}
+```
+
+### Step 3: Add a Background Image
+
+Place an image file named `jpeg-image.jpg` in the `assets` directory of your project.
+
+### Step 4: View the Output in a Browser
+
+Open the `index.html` file in a web browser to see the output. You will see a `<div>` element with a background image positioned at the top right corner of the background area.
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ minHeight: "200px"}}>
+  <div style={{ backgroundImage: "url('/assets/jpeg-image.jpg')", backgroundPosition: "top right", height: "200px", width: "400px", border: "1px solid #333", backgroundSize: "cover", color:"#fff" }}>
+    <p style={{ padding: "10px" }}>
+      This is a div with a background image positioned at the top right corner.
+    </p>
+  </div>    
+</BrowserWindow>
+
+By following these steps, you can use the `background-position` property to position the background image of an element at the top right corner of the background area.
+
+## Conclusion
+
+The `background-position` property in CSS allows you to control the placement of the background image within the background area of an element. By specifying the position using keywords, percentages, or length values, you can create visually appealing designs by positioning the background image as desired.
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/background-repeat.md b/docs/css/backgrounds/background-image/background-repeat.md
index e69de29bb..4bc8049b4 100644
--- a/docs/css/backgrounds/background-image/background-repeat.md
+++ b/docs/css/backgrounds/background-image/background-repeat.md
@@ -0,0 +1,137 @@
+---
+id: background-repeat
+title: Background Repeat
+sidebar_label: Background Repeat
+sidebar_position: 2
+tags: [background, css background, background repeat, background-repeat property]
+description: Learn how to control the repetition of a background image in CSS using the background-repeat property.
+keywords:
+  [
+    background repeat,
+    css background repeat,
+    background-repeat property,
+    css background-repeat,
+  ]
+---
+
+In CSS, the `background-repeat` property is used to specify how a background image is repeated within the background area of an element. This property allows you to control the repetition of the background image in both the horizontal and vertical directions.
+
+<AdsComponent />
+
+## Syntax
+
+The syntax for the `background-repeat` property is as follows:
+
+```css title="index.css"
+selector {
+  background-repeat: value;
+}
+```
+
+- `selector`: The element to which the background repeat is applied.
+- `background-repeat`: The CSS property used to control the repetition of the background image.
+- `value`: Specifies how the background image should be repeated. It can take one of the following values:
+  - `repeat`: The background image is repeated both horizontally and vertically to fill the background area.
+  - `repeat-x`: The background image is repeated horizontally to fill the background area.
+  - `repeat-y`: The background image is repeated vertically to fill the background area.
+  - `no-repeat`: The background image is displayed only once without any repetition.
+  - `initial`: Sets the background repeat to its default value.
+  - `inherit`: Inherits the background repeat value from the parent element.
+
+The default value of the `background-repeat` property is `repeat`.
+
+## Example
+
+In the following example, the `background-repeat` property is used to set the repetition of the background image of a `<div>` element to `repeat`, which repeats the background image both horizontally and vertically to fill the background area:
+
+```css title="index.css"
+div {
+  background-image: url("path/to/background-image.jpg");
+  background-repeat: repeat;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `repeat` background repeat to the background image of the `<div>` element:
+
+```html title="index.html"
+<div>
+  <p>
+    This is a div with a background image that repeats both horizontally and vertically to fill the background area.
+  </p>
+</div>
+```
+
+In this example, the background image will be repeated in both the horizontal and vertical directions to fill the background area of the `<div>` element. You can adjust the `background-repeat` property to control how the background image is repeated based on your design requirements. 
+
+<AdsComponent />
+
+:::note Try it yourself
+
+Experiment with different values of the `background-repeat` property to see how the background image repetition changes. You can use values like `repeat-x`, `repeat-y`, and `no-repeat` to achieve different visual effects.
+
+:::
+
+## Example: Using `background-repeat` with `background-size`
+
+You can combine the `background-repeat` property with the `background-size` property to create more complex background image effects. For example, you can repeat a background image in one direction while scaling it to cover the background area. Here's an example:
+
+This example demonstrates the use of the `background-size` property to set the size of the background image of an element:
+
+<Tabs>
+  <TabItem value="HTML" label="index.html">
+
+```html showLineNumbers
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Background Repeat Example</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div>
+    <p>
+      This is a div with a background image that repeats horizontally and scales to cover the background area.
+    </p>
+  </div>
+</body>
+</html>
+```
+
+</TabItem>
+<TabItem value="CSS" label="styles.css">
+
+```css showLineNumbers {3}
+div {
+  background-image: url("/assets/jpeg-image.jpg");
+  background-repeat: repeat-x;
+  background-size: cover;
+}
+
+p {
+  color: white;
+  font-size: 1.5rem;
+  text-align: center;
+  padding: 20px;
+}
+```
+
+</TabItem>
+</Tabs>
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundImage: "url('/assets/jpeg-image.jpg')", padding: "20px", minHeight: "200px", textAlign:"center", backgroundRepeat:"repeat-x", backgroundSize:"cover" }}>
+  <p style={{ color: "white", fontSize: "1.5rem" }}>
+    This is a div with a background image that repeats horizontally and scales to cover the background area.
+  </p>
+</BrowserWindow>
+
+In this example, the `background-repeat` property is set to `repeat-x`, which repeats the background image horizontally to fill the background area of the `<div>` element. The `background-size` property is set to `cover`, which scales the background image to cover the entire background area while maintaining its aspect ratio.
+
+By combining the `background-repeat` and `background-size` properties, you can create visually appealing background effects for your web pages.
+
+## Conclusion
+
+The `background-repeat` property in CSS allows you to control how a background image is repeated within the background area of an element. By setting the `background-repeat` property to different values like `repeat`, `repeat-x`, `repeat-y`, or `no-repeat`, you can achieve various background image repetition effects based on your design requirements. Experiment with different values of the `background-repeat` property to create visually interesting background patterns for your web pages.
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/background-size.md b/docs/css/backgrounds/background-image/background-size.md
index e69de29bb..e71476390 100644
--- a/docs/css/backgrounds/background-image/background-size.md
+++ b/docs/css/backgrounds/background-image/background-size.md
@@ -0,0 +1,134 @@
+---
+id: background-size
+title: Background Size
+sidebar_label: Background Size
+sidebar_position: 1
+tags: [background, css background, background size, background-size property]
+description: Learn how to set the size of the background image of an element in CSS using the background-size property.
+keywords:
+  [
+    background size,
+    css background size,
+    background-size property,
+    css background-size,
+  ]
+---
+
+In CSS, the `background-size` property is used to specify the size of the background image of an element. This property allows you to control how the background image is displayed within the element's background area.
+
+<AdsComponent />
+
+## Syntax
+
+The syntax for the `background-size` property is as follows:
+
+```css title="index.css"
+selector {
+  background-size: value;
+}
+```
+
+- `selector`: The element to which the background size is applied.
+- `background-size`: The CSS property used to set the size of the background image of an element.
+- `value`: Specifies the size of the background image. It can take one of the following values:
+  - `auto`: The browser automatically scales the background image to its original size.
+  - `cover`: The background image is scaled to cover the entire background area, maintaining its aspect ratio.
+  - `contain`: The background image is scaled to fit within the background area while maintaining its aspect ratio.
+  - `<length>`: Specifies the width and height of the background image using a length value (e.g., `200px`, `50%`).
+  - `<percentage>`: Specifies the width and height of the background image as a percentage of the background area.
+  - `initial`: Sets the background size to its default value.
+  - `inherit`: Inherits the background size from the parent element.
+
+The default value of the `background-size` property is `auto`.
+
+## Example
+
+In the following example, the `background-size` property is used to set the size of the background image of a `<div>` element to `cover`, which scales the background image to cover the entire background area while maintaining its aspect ratio:
+
+```css title="index.css"
+div {
+  background-image: url("path/to/background-image.jpg");
+  background-size: cover;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `cover` background size to the background image of the `<div>` element:
+
+```html title="index.html"
+<div>
+  This is a div with a background image that covers the entire background area.
+</div>
+```
+
+By using the `background-size` property, you can control how the background image is displayed within the element's background area, allowing you to create visually appealing designs on your web page.
+
+<AdsComponent />
+
+:::tip additional information
+
+**Aspect Ratio**: The aspect ratio of an image is the ratio of its width to its height. When using the `cover` or `contain` values for the `background-size` property, the aspect ratio of the background image is maintained while scaling to fit the background area.
+
+**Length Values**: Length values (e.g., `200px`, `50%`) can be used to specify the width and height of the background image. When using length values, the background image is scaled to the specified dimensions.
+
+The `background-size` property is particularly useful when working with responsive web design, as it allows you to control how the background image adapts to different screen sizes and devices.
+:::
+
+## Example for background-size property
+
+This example demonstrates the use of the `background-size` property to set the size of the background image of an element:
+
+<Tabs>
+  <TabItem value="HTML" label="index.html">
+
+```html showLineNumbers
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Background Size Example</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac felis
+        sit amet nunc ultrices ultricies. Nullam nec nunc nec nunc ultrices
+        ultricies. Nullam nec nunc nec nunc ultrices ultricies.
+      </p>
+    </div>
+  </body>
+</html>
+```
+
+</TabItem>
+<TabItem value="CSS" label="styles.css">
+
+```css showLineNumbers {3}
+div {
+  background-image: url("/assets/jpeg-image.jpg");
+  background-size: cover;
+  padding: 20px;
+  color: white;
+  text-align: center;
+}
+```
+
+</TabItem>
+</Tabs>
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundImage: "url('/assets/jpeg-image.jpg')", color: "#fff", padding: "20px", minHeight: "200px", textAlign:"center", backgroundSize:"cover" }}>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac felis sit
+    amet nunc ultrices ultricies. Nullam nec nunc nec nunc ultrices ultricies.
+    Nullam nec nunc nec nunc ultrices ultricies.
+  </p>
+</BrowserWindow>
+
+In this example, the `background-size` property is set to `cover`, which scales the background image to cover the entire background area of the `<div>` element while maintaining its aspect ratio.
+
+## Conclusion
+
+The `background-size` property in CSS allows you to control the size of the background image of an element, enabling you to create visually appealing designs on your web page. By specifying the size of the background image using values like `cover`, `contain`, or length values, you can customize how the background image is displayed within the background area of an element.
\ No newline at end of file