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 kitabu cha Simulizi 👉2 Madrasa kiganjani 👉3 Tafasiri ya Riyadh Swalihina 👉4 web hosting 👉5 ai web app 👉6 Kitabu cha Afya
Post zinazofanana:
CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css
Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...CSS - SOMO LA 12: Width, Height, Max/Min Width na Overflow
Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.
Soma Zaidi...CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...CSS - SOMO LA 14: Position Property
Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
Soma Zaidi...CSS - SOMO LA 33: CSS Frameworks
Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...CSS - SOMO LA 27: Kutumia @import Katika CSS
Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...