1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < title > Gradient picture as background</ title >
6+ < style >
7+ .container {
8+ text-align : left;
9+ color : # 000 ;
10+ font-size : 12px ;
11+ padding : 3px 3px ;
12+ border : 1pt solid black;
13+ }
14+
15+ .abs {
16+ height : 50pt ;
17+ width : 200pt ;
18+ }
19+
20+ .big {
21+ width : 300pt ;
22+ height : 80pt ;
23+ border : 1pt dashed black
24+ }
25+
26+ .rel {
27+ height : 50% ;
28+ width : 80% ;
29+ }
30+
31+ .bg {
32+ background-image : url (./ images.jpg);
33+ background-repeat : no-repeat;
34+ background-size : 100% 100% ;
35+ }
36+
37+ .bg-size-100-rel-w {
38+ background-size : 100% ;
39+ }
40+
41+ .bg-size-100-rel-wh {
42+ background-size : 100% 100% ;
43+ }
44+
45+ .bg-size-75-rel-w {
46+ background-size : 75% ;
47+ }
48+
49+ .bg-size-75-rel-wh {
50+ background-size : 75% 75% ;
51+ }
52+
53+ .bg-size-130-rel-w {
54+ background-size : 130% ;
55+ }
56+
57+ .bg-size-130-rel-wh {
58+ background-size : 130% 130% ;
59+ }
60+
61+ .bg-size-200-abs-w {
62+ background-size : 200pt ;
63+ }
64+
65+ .bg-size-200-abs-wh {
66+ background-size : 200pt 200pt ;
67+ }
68+
69+ .bg-size-100-abs-w {
70+ background-size : 100pt ;
71+ }
72+
73+ .bg-size-100-abs-wh {
74+ background-size : 100pt 100pt ;
75+ }
76+
77+ .bg-size-300-abs-w {
78+ background-size : 300pt ;
79+ }
80+
81+ .bg-size-300-abs-wh {
82+ background-size : 300pt 300pt ;
83+ }
84+
85+ span {
86+ color : # 000 ;
87+ font-size : 7pt ;
88+ font-weight : bold;
89+ }
90+
91+
92+
93+
94+ </ style >
95+ </ head >
96+ < body >
97+ < h1 > Div with absolute width (200pt) and height (50pt)</ h1 >
98+ < div >
99+ < h2 > Relative background width only declaration</ h2 >
100+ < div >
101+ < h3 > 100%</ h3 >
102+ < div class ="container abs bg bg-size-100-rel-w ">
103+ < span > hello world :D!</ span >
104+ </ div >
105+ < h3 > 75%</ h3 >
106+ < div class =" container abs bg bg-size-75-rel-w ">
107+ < span > hello world :D!</ span >
108+ </ div >
109+ < h3 > 130%</ h3 >
110+ < div class =" container abs bg bg-size-130-rel-w ">
111+ < span > hello world :D!</ span >
112+ </ div >
113+ </ div >
114+ < h2 > Relative background width and height declarations</ h2 >
115+ < div >
116+ < h3 > 100%</ h3 >
117+ < div class =" container abs bg bg-size-100-rel-wh ">
118+ < span > hello world :D!</ span >
119+ </ div >
120+ < h3 > 75%</ h3 >
121+ < div class =" container abs bg bg-size-75-rel-wh ">
122+ < span > hello world :D!</ span >
123+ </ div >
124+ < h3 > 130%</ h3 >
125+ < div class =" container abs bg bg-size-130-rel-wh ">
126+ < span > hello world :D!</ span >
127+ </ div >
128+ </ div >
129+ < h2 > Absolute background width only declaration</ h2 >
130+ < div >
131+ < h3 > 200pt</ h3 >
132+ < div class =" container abs bg bg-size-200-abs-w ">
133+ < span > hello world :D!</ span >
134+ </ div >
135+ < h3 > 100pt</ h3 >
136+ < div class =" container abs bg bg-size-100-abs-w ">
137+ < span > hello world :D!</ span >
138+ </ div >
139+ < h3 > 300pt</ h3 >
140+ < div class =" container abs bg bg-size-300-abs-w ">
141+ < span > hello world :D!</ span >
142+ </ div >
143+ </ div >
144+ < h2 > Absolute background width and height declarations</ h2 >
145+ < div >
146+ < h3 > 200pt</ h3 >
147+ < div class =" container abs bg bg-size-200-abs-wh ">
148+ < span > hello world :D!</ span >
149+ </ div >
150+ < h3 > 100pt</ h3 >
151+ < div class =" container abs bg bg-size-100-abs-wh ">
152+ < span > hello world :D!</ span >
153+ </ div >
154+ < h3 > 300pt</ h3 >
155+ < div class =" container abs bg bg-size-300-abs-wh ">
156+ < span > hello world :D!</ span >
157+ </ div >
158+ </ div >
159+ </ div >
160+
161+ < h1 > Div with relative width (80%) and height (70%) with parent abs width (300pt) and height(80pt)</ h1 >
162+ < div >
163+ < h2 > Relative background width only declaration</ h2 >
164+ < div >
165+ < h3 > 100%</ h3 >
166+ < div class ="big ">
167+ < div class ="container rel bg bg-size-100-rel-w ">
168+ < span > hello world :D!</ span >
169+ </ div >
170+ </ div >
171+ < h3 > 75%</ h3 >
172+ < div class ="big ">
173+ < div class =" container rel bg bg-size-75-rel-w ">
174+ < span > hello world :D!</ span >
175+ </ div >
176+ </ div >
177+ < h3 > 130%</ h3 >
178+ < div class ="big ">
179+ < div class =" container rel bg bg-size-130-rel-w ">
180+ < span > hello world :D!</ span >
181+ </ div >
182+ </ div >
183+ < h2 > Relative background width and height declarations</ h2 >
184+ < div >
185+ < h3 > 100%</ h3 >
186+ < div class ="big ">
187+ < div class =" container rel bg bg-size-100-rel-wh ">
188+ < span > hello world :D!</ span >
189+ </ div >
190+ </ div >
191+ < h3 > 75%</ h3 >
192+ < div class ="big ">
193+ < div class =" container rel bg bg-size-75-rel-wh ">
194+ < span > hello world :D!</ span >
195+ </ div >
196+ </ div >
197+ < h3 > 130%</ h3 >
198+ < div class ="big ">
199+ < div class =" container rel bg bg-size-130-rel-wh ">
200+ < span > hello world :D!</ span >
201+ </ div >
202+ </ div >
203+ < h2 > absolute background width only declaration</ h2 >
204+ < div >
205+ < h3 > 200pt</ h3 >
206+ < div class ="big ">
207+ < div class =" container rel bg bg-size-200-abs-w ">
208+ < span > hello world :D!</ span >
209+ </ div >
210+ </ div >
211+ < h3 > 100pt</ h3 >
212+ < div class ="big ">
213+ < div class =" container rel bg bg-size-100-abs-w ">
214+ < span > hello world :D!</ span >
215+ </ div >
216+ </ div >
217+ < h3 > 300pt</ h3 >
218+ < div class ="big ">
219+ < div class =" container rel bg bg-size-300-abs-w ">
220+ < span > hello world :D!</ span >
221+ </ div >
222+ </ div >
223+ </ div >
224+ < h2 > Absolute background width and height declarations</ h2 >
225+ < div >
226+ < h3 > 200pt</ h3 >
227+ < div class ="big ">
228+ < div class =" container rel bg bg-size-200-abs-wh ">
229+ < span > hello world :D!</ span >
230+ </ div >
231+ </ div >
232+ < h3 > 100pt</ h3 >
233+ < div class ="big ">
234+ < div class =" container rel bg bg-size-100-abs-wh ">
235+ < span > hello world :D!</ span >
236+ </ div >
237+ </ div >
238+ < h3 > 300pt</ h3 >
239+ < div class ="big ">
240+ < div class =" container rel bg bg-size-300-abs-wh ">
241+ < span > hello world :D!</ span >
242+ </ div >
243+ </ div >
244+ </ div >
245+ </ div >
246+ </ body >
247+ </ html >
0 commit comments