Skip to content

Commit e7e28df

Browse files
ajay-dhangarajay-dhangar
committed
bg content added
1 parent eb7a5e5 commit e7e28df

File tree

7 files changed

+678
-0
lines changed

7 files changed

+678
-0
lines changed

‎docs/css/backgrounds/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Backgrounds",
3+
"position": 4,
4+
"link": {
5+
"type": "generated-index",
6+
"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."
7+
}
8+
}

‎docs/css/backgrounds/background-color.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
id: background-color
3+
title: Background Color
4+
sidebar_label: Background Color
5+
sidebar_position: 1
6+
tags: [background, color, css background, background color]
7+
description: Learn how to set the background color of an element in CSS using the background-color property.
8+
keywords:
9+
[
10+
background color,
11+
css background color,
12+
background-color property,
13+
css background-color,
14+
]
15+
---
16+
17+
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.
18+
19+
<AdsComponent />
20+
21+
## Syntax
22+
23+
The syntax for the `background-color` property is as follows:
24+
25+
```css title="index.css"
26+
selector {
27+
background-color: color;
28+
}
29+
```
30+
31+
- `selector`: The element to which the background color is applied.
32+
- `background-color`: The CSS property used to set the background color of an element.
33+
- `color`: The color value used to specify the background color.
34+
- The `color` value can be specified using various color formats, such as hexadecimal, RGB, RGBA, HSL, and HSLA.
35+
- The `color` value can also be specified using color keywords like `red`, `blue`, `green`, etc.
36+
37+
## Example
38+
39+
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:
40+
41+
```css title="index.css"
42+
div {
43+
background-color: #ADD8E6; /* Light blue color */
44+
}
45+
```
46+
47+
In the HTML code below, the CSS rule will apply the light blue color to the background of the `<div>` element:
48+
49+
```html title="index.html"
50+
<div>This is a div with a light blue background.</div>
51+
```
52+
53+
By using the `background-color` property, you can customize the background color of elements on your web page to create visually appealing designs.
54+
55+
<AdsComponent />
56+
57+
:::info Additional Information
58+
59+
- The `background-color` property sets the background color of an element, covering the entire content area of the element.
60+
- 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.
61+
- 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.
62+
63+
:::
64+
65+
## Example for Background Color
66+
67+
In this example, we will set the background color of a `<div>` element using the `background-color` property with an RGB color value:
68+
69+
<Tabs>
70+
<TabItem value="HTML" label="index.html">
71+
72+
```html showLineNumbers
73+
<!DOCTYPE html>
74+
<html lang="en">
75+
<head>
76+
<meta charset="UTF-8">
77+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78+
<title>Background Color Example</title>
79+
<link rel="stylesheet" href="styles.css">
80+
</head>
81+
<body>
82+
<div>This is a div with a light green background.</div>
83+
</body>
84+
</html>
85+
```
86+
87+
</TabItem>
88+
<TabItem value="CSS" label="styles.css">
89+
90+
```css showLineNumbers {2}
91+
div {
92+
background-color: rgb(144, 238, 144); /* Light green color */
93+
}
94+
```
95+
96+
</TabItem>
97+
</Tabs>
98+
99+
Now, you can see the output of the above code in the Browser Window like this:
100+
101+
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000", padding: "0", minHeight: "200px" }}>
102+
<>
103+
<div style={{backgroundColor: "rgb(144, 238, 144)"}}>This is a div with a light green background.</div>
104+
</>
105+
</BrowserWindow>
106+
107+
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.
108+
109+
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.
110+
111+
## Conclusion
112+
113+
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.

‎docs/css/backgrounds/background-image/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Background Image",
3+
"position": 2,
4+
"link": {
5+
"type": "generated-index",
6+
"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."
7+
}
8+
}

‎docs/css/backgrounds/background-image/background-attachment.md

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
id: background-attachment
3+
title: Background Attachment
4+
sidebar_label: Background Attachment
5+
sidebar_position: 4
6+
tags: [background, css background, background attachment, background-attachment property]
7+
description: Learn how to set the background attachment behavior of an element in CSS using the background-attachment property.
8+
keywords:
9+
[
10+
background attachment,
11+
css background attachment,
12+
background-attachment property,
13+
css background-attachment,
14+
]
15+
---
16+
17+
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.
18+
19+
<AdsComponent />
20+
21+
## Syntax
22+
23+
The syntax for the `background-attachment` property is as follows:
24+
25+
```css title="index.css"
26+
selector {
27+
background-attachment: value;
28+
}
29+
```
30+
31+
- `selector`: The element to which the background attachment behavior is applied.
32+
- `background-attachment`: The CSS property used to set the background attachment behavior of an element.
33+
- `value`: Specifies the attachment behavior of the background image. It can take one of the following values:
34+
- `scroll`: The background image scrolls along with the content when the content is scrolled.
35+
- `fixed`: The background image remains fixed within the viewport as the content is scrolled.
36+
- `local`: The background image scrolls along with the element's contents, rather than the entire page.
37+
- `initial`: Sets the background attachment behavior to its default value.
38+
- The default value of the `background-attachment` property is `scroll`.
39+
40+
## Example
41+
42+
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:
43+
44+
```css title="index.css"
45+
div {
46+
background-image: url('path/to/background-image.jpg');
47+
background-attachment: fixed;
48+
}
49+
```
50+
51+
In the HTML code below, the CSS rule will apply the `fixed` background attachment behavior to the background image of the `<div>` element:
52+
53+
```html title="index.html"
54+
<div>This is a div with a fixed background image.</div>
55+
```
56+
57+
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.
58+
59+
<AdsComponent />
60+
61+
:::info Additional Information
62+
63+
- The `background-attachment` property is often used in combination with the `background-image` property to set a background image and define its attachment behavior.
64+
- 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.
65+
66+
:::
67+
68+
## Example for background-attachment property
69+
70+
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:
71+
72+
<Tabs>
73+
<TabItem value="HTML" label="index.html">
74+
75+
```html showLineNumbers
76+
<!DOCTYPE html>
77+
<html lang="en">
78+
<head>
79+
<meta charset="UTF-8">
80+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
81+
<title>Background Attachment Example</title>
82+
<link rel="stylesheet" href="styles.css">
83+
</head>
84+
<body>
85+
<div>
86+
<h1>Fixed Background Image</h1>
87+
<p>This is a div with a fixed background image.</p>
88+
</div>
89+
</body>
90+
</html>
91+
```
92+
93+
</TabItem>
94+
<TabItem value="CSS" label="styles.css">
95+
96+
```css showLineNumbers {3}
97+
div {
98+
background-image: url('/assets/jpeg-image.jpg');
99+
background-attachment: fixed;
100+
color: white;
101+
text-align: center;
102+
padding: 20px;
103+
}
104+
105+
h1 {
106+
font-size: 2em;
107+
margin-bottom: 0;
108+
}
109+
110+
p {
111+
font-size: 1.2em;
112+
margin-top: 0;
113+
}
114+
```
115+
116+
</TabItem>
117+
</Tabs>
118+
119+
Now, you can see the output of the above code in the Browser Window like this:
120+
121+
<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" }}>
122+
<>
123+
<h1 style={{ fontSize: "2em", marginBottom: "0" }}>Fixed Background Image</h1>
124+
<p style={{ fontSize: "1.2em", marginTop: "0" }}>This is a div with a fixed background image.</p>
125+
</>
126+
</BrowserWindow>
127+
128+
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.
129+
130+
<AdsComponent />
131+
132+
## Conclusion
133+
134+
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.

0 commit comments

Comments
 (0)