Skip to content

Commit e5a3476

Browse files
ShivamMaurya2002ShivamMaurya2002
authored
Update index.html
1 parent 3f21db9 commit e5a3476

File tree

1 file changed

+104
-11
lines changed

1 file changed

+104
-11
lines changed

‎CSS Background/index.html‎

Lines changed: 104 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010

1111
<body>
1212

13-
<!-- Nev Bar -->
13+
<!-- ************************************************ Nev Bar ************************************************* -->
14+
1415
<div class="header">
1516

1617
<div>
@@ -27,67 +28,77 @@
2728

2829
</div>
2930

30-
<!-- Hero Section -->
31+
<!-- ********************************************** Hero Section *********************************************** -->
32+
3133
<section class="hero">
3234

3335
<h1 class="heading">CSS Background Property</h1>
3436

3537
<p class="main-para">The CSS background properties are used to add background effects for elements.
3638
<br>These are following CSS background properties:-
37-
<li><b>Background (shorthand property)</b></li>
3839
<li><b>Background-color</b></li>
3940
<li><b>Background-image</b></li>
4041
<li><b>Background-repeat</b></li>
4142
<li><b>Background-size</b></li>
4243
<li><b>Background-attachment</b></li>
4344
<li><b>Background-position</b></li>
4445
<li><b>Background-clip</b></li>
46+
<li><b>Background (shorthand property)</b></li>
4547
</p>
4648

4749
</section>
4850

4951
<hr>
5052

51-
<!-- CSS Background Shorthand -->
52-
<div class="Background_Shorthand">
53-
<h2 class="heading2">1. Background (Shorthand):</h1>
54-
</div>
55-
56-
<hr>
53+
<!-- ***************************************** CSS Background-Color Property *********************************** -->
5754

58-
<!-- CSS Background-Color -->
5955
<div class="Background-color">
6056

61-
<h2 class="heading2">2. CSS Background-color:</h1>
57+
<h2 class="heading2">1. CSS Background-color:</h1>
6258

6359
<p>The background-color property specifies the background color of an element.</p>
6460

61+
<h3>Value of CSS Background-Color Property:</h3>
62+
63+
<li><b>Color-Name (Red, Green, Blue, yellow, etc)</b></li>
64+
<li><b>RGB (rgb(255, 0, 0))</b></li>
65+
<li><b>RGBA (rgba(0, 255, 0, 0.500))</b></li>
66+
<li><b>HSL (hsl(304, 43%, 51%))</b></li>
67+
<li><b>HSLA (hsla(190, 86%, 43%, 0.5))</b></li>
68+
<li><b>Hex-Code ( #529001)</b></li>
69+
6570
<h3>1. Example with color name:</h3>
71+
6672
<div class="Color_Name">
6773
Background-color: blue; /* color name */
6874
</div>
6975

7076
<h3>2. Example with RGB:</h3>
77+
7178
<div class="RGB">
7279
Background-color: rgb(255, 0, 0); /* RGB */
7380
</div>
7481

7582
<h3>3. Example with RGBA:</h3>
83+
7684
<div class="RGBA">
7785
Background-color: rgba(0, 255, 0, 0.500); /* RGBA (alpha)*/
7886
</div>
7987

8088
<h3>4. Example with HSL:</h3>
89+
8190
<div class="HSL">
8291
Background-color: hsl(304, 43%, 51%); /* HSL */
8392
</div>
8493

8594
<h3>5. Example with HSLA:</h3>
95+
8696
<div class="HSLA">
8797
Background-color: hsla(190, 86%, 43%, 0.5); /* HSLA (alpha) */
8898
</div>
8999

90100
<h3>6. Example with hex code(#fff):</h3>
101+
91102
<div class="HEX_Code">
92103
Background-color: #529001; /* HEX Code */
93104
</div>
@@ -96,5 +107,87 @@ <h3>6. Example with hex code(#fff):</h3>
96107

97108
<hr>
98109

110+
<!-- ************************************* CSS Background-Image Property ****************************************-->
111+
112+
<div class="Background-image">
113+
114+
<h2 class="heading2">2. CSS Background-Image:</h1>
115+
116+
<p>The background-image property specifies an image to use as the background of an element.<br>
117+
By default, the image is repeated so it covers the entire element.</p>
118+
119+
<h3>Value of CSS Background-Image Property:</h3>
120+
121+
<li><b>None (default)</b></li>
122+
<li><b>Url()</b></li>
123+
<li><b>Conic-gradient()</b></li>
124+
<li><b>Repeating-conic-gradient()</b></li>
125+
<li><b>Linear-gradient()</b></li>
126+
<li><b>Repeating-linear-gradient()</b></li>
127+
<li><b>Radial-gradient()</b></li>
128+
<li><b>Repeating-radial-gradient()</b></li>
129+
130+
<div class="main">
131+
132+
133+
<div class="None">
134+
<h3 class="BI-h3">Background-Image: none;</h3>
135+
136+
</div>
137+
138+
139+
<div class="url">
140+
<h3 class="BI-h3">Background-Image: url("");</h3>
141+
142+
</div>
143+
144+
145+
<div class="Conic-gradient">
146+
<h3 class="BI-h3">Background-Image: Conic-gradient();</h3>
147+
</div>
148+
149+
150+
<div class="Repeating-conic-gradient">
151+
<h3 class="BI-h3">Background-Image: Repeating-conic-gradient();</h3>
152+
153+
</div>
154+
155+
156+
<div class="Linear-gradient">
157+
<h3 class="BI-h3">Background-Image: Linear-gradient();</h3>
158+
159+
</div>
160+
161+
162+
<div class="Repeating-linear-gradient">
163+
<h3 class="BI-h3">Background-Image: Repeating-linear-gradient();</h3>
164+
165+
</div>
166+
167+
168+
<div class="Radial-gradient">
169+
<h3 class="BI-h3">Background-Image: Radial-gradient();</h3>
170+
171+
</div>
172+
173+
174+
<div class="Repeating-radial-gradient">
175+
<h3 class="BI-h3">Background-Image: Repeating-radial-gradient();</h3>
176+
177+
</div>
178+
179+
</div>
180+
181+
</div>
182+
183+
<hr>
184+
185+
<!-- ******************************** CSS Background (Shorthand) Property ************************************** -->
186+
187+
<div class="Background_Shorthand">
188+
<h2 class="heading2">. Background (Shorthand):</h1>
189+
</div>
190+
99191
</body>
192+
100193
</html>

0 commit comments

Comments
 (0)