picha

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:


? 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:


? 6. background-attachment

Inadhibiti kama background inabaki palepale au inasogea pamoja na ukurasa.

...

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

help_outlineZoezi la Maswali

info Jaza maswali yote au baadhi kisha bofya kitufe cha kutuma majibu hapo chini.
1 Shorthand ya background inaweza kuunganisha nini kati ya hizi?
2 Ili kuzuia picha kurudiwa rudwa kwenye background, unatumia nini?
3 Property ipi hutumika kuweka picha kama background?
4 Background-position: center; inaweka picha wapi?
5 Background-attachment: fixed; inafanya nini?

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 2025-06-23 Topic: CSS Main: ICT File: Download PDF Views 478

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Simulizi za Hadithi Audio    👉2 Dua za Mitume na Manabii    👉3 Sira ya Mtume Muhammad (s.a.w)    👉4 Tafasiri ya Riyadh Swalihina    👉5 Kitau cha Fiqh    👉6 Kitabu cha Afya   

Post zinazofanana:

CSS - SOMO LA 17: Flexbox Advanced

Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.

Soma Zaidi...
CSS - SOMO LA 28: CSS Timing Functions

Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.

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...
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 19: Pseudo-classes na Pseudo-elements

Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.

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 31: CSS Filters (blur, brightness, contrast.)

Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.

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 2: Jinsi ya ku weka code za css kwenye HTML

katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html

Soma Zaidi...