Skip to content

Commit 4edcfd8

Browse files
ajay-dhangarajay-dhangar
committed
Added Complete Background Module for CSS Tutorial
1 parent 9c593ea commit 4edcfd8

File tree

13 files changed

+787
-10
lines changed

13 files changed

+787
-10
lines changed

‎docs/css/background/background-attachment.mdx‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,60 @@
1-
<ComingSoon />
1+
---
2+
title: "The background-attachment Property"
3+
description: "Learn how to use the CSS background-attachment property to control whether a background image scrolls with the content or remains fixed in the viewport (parallax effect)."
4+
keywords: [CSS background-attachment, fixed background, scroll background, local scrolling, parallax effect, background styling, CodeHarborHub]
5+
tags: [CSS background-attachment, fixed background, scroll background, local scrolling, parallax effect, background styling]
6+
sidebar_label: "background-attachment"
7+
---
8+
9+
The CSS **`background-attachment`** property determines whether a background image scrolls with the content of the element or remains **fixed** in its position relative to the viewport or the element itself.
10+
11+
This property is most famous for creating the **parallax scrolling effect**, where the foreground content moves while the background image stays still.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## Syntax and Values
17+
18+
The `background-attachment` property accepts three main keyword values:
19+
20+
| Value | Description | Behavior |
21+
| :--- | :--- | :--- |
22+
| **`scroll`** | The default value. The background image scrolls with the element's content. If the element itself is scrolled (e.g., if it has `overflow: scroll`), the background *stays fixed* to the element's content area. | Scrolls with the page, but fixed within the element's local content area. |
23+
| **`fixed`** | The background image is **fixed relative to the viewport**. It does not move even when the page is scrolled. This creates the classic **parallax effect**. | Fixed to the viewport; does not scroll. |
24+
| **`local`** | The background image scrolls with the element's **content** and its **local scroll area**. If the element has `overflow: scroll`, the background scrolls inside the element. | Scrolls with the content and any inner scrollbar. |
25+
26+
### Example
27+
28+
To create a striking parallax banner:
29+
30+
```css title="styles.css"
31+
.parallax-banner {
32+
background-image: url('stars.jpg');
33+
background-attachment: fixed; /* Holds the image still */
34+
background-position: center;
35+
background-size: cover;
36+
height: 500px; /* Needs height to see the effect */
37+
}
38+
```
39+
40+
## Understanding `scroll` vs. `local`
41+
42+
The difference between `scroll` and `local` only matters when the element itself has its own scrollbar (e.g., using `overflow: auto;`).
43+
44+
1. **`scroll` (Default):** If the content inside the box scrolls, the background image stays fixed relative to the box's padding edge. The image does *not* scroll with the inner content.
45+
2. **`local`:** If the content inside the box scrolls, the background image scrolls along with the content. This is useful for placing watermarks or textures that follow a locally scrolled text area.
46+
47+
<AdsComponent />
48+
<br />
49+
50+
## Interactive `background-attachment` Demo
51+
52+
This demo focuses on the key difference between **`scroll`** and **`local`** when an element has its own internal scrollbar (`overflow-y: scroll`).
53+
54+
* **`scroll` (Default):** The background image is **fixed** relative to the **element's border**; it does not move with the text content.
55+
* **`local`:** The background image scrolls **with the text content**, moving out of view as you scroll down inside the box.
56+
57+
<CodePenEmbed
58+
title="Interactive background-attachment Demo"
59+
penId="dPMZmLa"
60+
/>

‎docs/css/background/background-color.mdx‎

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,88 @@
1-
<ComingSoon />
1+
---
2+
title: "The background-color Property"
3+
description: "Learn how to use the CSS background-color property to set the solid color behind an element's content, padding, and border."
4+
keywords: [CSS background-color, background color property, transparency, color values, background styling, CodeHarborHub]
5+
tags: [CSS background-color, background color property, transparency, color values, background styling]
6+
sidebar_label: "background-color"
7+
---
8+
9+
The CSS **`background-color`** property is used to set the solid color filling the background of an element. This color extends under the element's **content**, **padding**, and **border** (by default).
10+
11+
It is a fundamental property for defining the visual identity and hierarchy of elements on a page.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## Syntax and Values
17+
18+
The `background-color` property accepts any valid CSS color value.
19+
20+
### The Syntax
21+
22+
```css title="styles.css"
23+
selector {
24+
background-color: value; /* e.g., background-color: #f0f0f0; */
25+
}
26+
```
27+
28+
### Supported Color Values
29+
30+
You can use all the major color definition systems we've covered:
31+
32+
1. **Keywords:** `red`, `skyblue`, `transparent`.
33+
2. **HEX Codes:** `#F0F8FF`, `#333`.
34+
3. **RGB/RGBA:** `rgb(255, 0, 0)`, `rgba(0, 0, 0, 0.5)`.
35+
4. **HSL/HSLA:** `hsl(120, 100%, 50%)`, `hsla(200, 50%, 75%, 0.8)`.
36+
37+
## Transparency and Opacity
38+
39+
The background color's transparency is controlled in two main ways:
40+
41+
### 1. The `transparent` Keyword
42+
43+
By default, elements are transparent. You can explicitly set an element's background to be fully clear using the `transparent` keyword.
44+
45+
```css title="styles.css"
46+
.clear-box {
47+
background-color: transparent; /* Allows content underneath to show through */
48+
}
49+
```
50+
51+
### 2. RGBA or HSLA
52+
53+
To create a background that is partially transparent (semi-opaque), you must use a color format that supports the **Alpha ($\alpha$) channel**, such as RGBA or HSLA.
54+
55+
```css title="styles.css"
56+
/* Creates a light blue background that is 80% opaque (20% transparent) */
57+
.semi-opaque {
58+
background-color: hsla(200, 80%, 80%, 0.8);
59+
}
60+
```
61+
62+
:::tip Transparency vs. Opacity
63+
Use **RGBA/HSLA** to make *only the background* transparent while keeping the text and other content solid. Using the separate `opacity` property on the element will make **everything** inside the element transparent, which usually ruins text readability.
64+
:::
65+
66+
<AdsComponent />
67+
<br />
68+
69+
## Inheritance and Overlap
70+
71+
### Non-Inheritance
72+
73+
The `background-color` property **is not inherited** by child elements.
74+
75+
If you set `body { background-color: lightgray; }`, all child elements (`div`, `p`, etc.) will have their own default `background-color: transparent;`. Since they are transparent, the parent's light gray color is visible through them.
76+
77+
### Overlap
78+
79+
The background color is drawn **under** the border of the element. This means if you use a transparent or dashed border, the background color will be visible through the border.
80+
81+
## Interactive `background-color` Demo
82+
83+
Use the live editor to change the background color of the box using different color formats, and observe the effect of RGBA transparency.
84+
85+
<CodePenEmbed
86+
title="Interactive background-color Demo"
87+
penId="emZGxbz"
88+
/>

‎docs/css/background/background-gradient.mdx‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,107 @@
1-
<ComingSoon />
1+
---
2+
title: "The Background Gradient"
3+
description: "Learn how to use CSS gradient functions (linear and radial) to create smooth, code-generated color transitions as an element's background without using image files."
4+
keywords: [CSS background gradient, linear-gradient, radial-gradient, background-image, color transition, CodeHarborHub]
5+
tags: [CSS background gradient, linear-gradient, radial-gradient, background-image, color transition]
6+
sidebar_label: "background-gradient"
7+
---
8+
9+
CSS **gradients** allow you to create smooth, code-generated transitions between two or more colors. Although they define colors, they are technically treated as **background images** by the browser and are applied using the `background-image` property (or the `background` shorthand).
10+
11+
Since gradients are generated by code, they are perfectly scalable and load much faster than traditional image files.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## Applying a Gradient
17+
18+
Gradients are functions of the `background-image` property:
19+
20+
```css title="styles.css"
21+
selector {
22+
background-image: linear-gradient(...);
23+
/* OR */
24+
background-image: radial-gradient(...);
25+
}
26+
```
27+
28+
## 1. `linear-gradient()`: Straight Transitions
29+
30+
A linear gradient transitions colors along a straight line. You must define a direction or angle, and at least two color stops.
31+
32+
### Syntax and Direction
33+
34+
The direction can be set using keywords (`to top`, `to right`, `to bottom left`) or an angle in degrees (`deg`).
35+
36+
```css title="styles.css"
37+
/* Direction keyword: transitions from left to right */
38+
.box-1 {
39+
background-image: linear-gradient(to right, #00C9FF, #92FE9D);
40+
}
41+
42+
/* Angle: transitions diagonally from bottom-left to top-right */
43+
.box-2 {
44+
background-image: linear-gradient(45deg, #FF6B6B, #FFE66D);
45+
}
46+
```
47+
48+
<AdsComponent />
49+
<br />
50+
51+
## 2. `radial-gradient()`: Circular Transitions
52+
53+
A radial gradient transitions colors outward from a central point, radiating in a circular or elliptical shape.
54+
55+
### Syntax and Shape
56+
57+
You can optionally specify the shape (`circle` or `ellipse`) and the position where the center of the gradient starts.
58+
59+
```css title="styles.css"
60+
/* Default: transitions outward from the center (yellow) to the edge (red) */
61+
.box-3 {
62+
background-image: radial-gradient(circle at center, yellow, red);
63+
}
64+
65+
/* Position: starts from the top-left corner */
66+
.box-4 {
67+
background-image: radial-gradient(at top left, #53a388, #3e5060);
68+
}
69+
```
70+
71+
## Color Stops and Transparency
72+
73+
You can define **color stops** to control where the color transition begins and ends, using percentages or length units.
74+
75+
### Example: Sharp Stripes
76+
77+
Setting two colors to stop at the same point creates a hard line or a stripe.
78+
79+
```css title="styles.css"
80+
/* Creates a hard, vertical stripe at 50% */
81+
.stripe {
82+
background-image: linear-gradient(to right, navy 50%, white 50%);
83+
}
84+
```
85+
86+
### Using Transparency
87+
88+
Using RGBA or HSLA color formats allows you to fade a color to complete transparency, revealing the element's `background-color` or whatever is behind the element.
89+
90+
```css title="styles.css"
91+
/* Fades from solid black to completely transparent */
92+
.fade-out {
93+
background-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0));
94+
}
95+
```
96+
97+
<AdsComponent />
98+
<br />
99+
100+
## Interactive Gradient Demo
101+
102+
Experiment with different gradient types and settings in the live editor.
103+
104+
<CodePenEmbed
105+
title="Interactive Gradient Demo"
106+
penId="RNajVBM"
107+
/>

0 commit comments

Comments
 (0)