CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS
Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
? 1. background-color
Inatumika kuweka rangi ya nyuma ya element.
div {
background-color: lightblue;
}
? 2. background-image
Inatumika kuweka picha kama background ya element.
body {
background-image: url("picha.jpg");
}
? 3. background-repeat
Kwa kawaida picha ya background hurudiwa (repeat). Kama hutaki irudiwe, tumia:
body {
background-image: url("picha.jpg");
background-repeat: no-repeat;
}
Chaguo zingine:
-
repeat-x: Rudiwa upande wa mlalo -
repeat-y: Rudiwa upande wa wima -
repeat: Rudiwa pande zote (default) -
no-repeat: Haijirudii
? 4. background-position
Inaelekeza picha iwekwe wapi. Mfano:
body {
background-image: url("picha.jpg");
background-position: center;
}
Chaguzi maarufu: top, bottom, left, right, center, au vipimo: 50px 100px
? 5. background-size
Inadhibiti ukubwa wa picha ya background.
body {
background-image: url("picha.jpg");
background-size: cover;
}
Chaguzi:
-
auto -
cover: picha inajaza eneo lote -
contain: picha inaingia yote ndani ya eneo -
px/percentage kama
100px 200px
? 6. background-attachment
Inadhibiti kama background inabaki palepale au inasogea pamoja na ukurasa.
body {
background-image: url("picha.jpg");
background-attachment: fixed;
}
Chaguzi:
-
scroll: Inasogea na ukurasa -
fixed: Inabaki...
help_outlineZoezi la Maswali
Umeionaje Makala hii.. ?
Share On:
👉1 web hosting 👉2 Simulizi za Hadithi Audio 👉3 Sira ya Mtume Muhammad (s.a.w) 👉4 Kitabu cha Afya 👉5 kitabu cha Simulizi 👉6 Bongolite - Game zone - Play free game
Post zinazofanana:
CSS - somo la 34: if() Condition katika CSS
Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni
Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.
Soma Zaidi...CSS - SOMO LA 22: CSS Transition na Animation
Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.
Soma Zaidi...CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS
Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...CSS - SOMO LA 10: Box Model katika CSS
Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
Soma Zaidi...CSS - SOMO LA 13: Display Property
Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Soma Zaidi...