CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS

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

• local: Inasogea na element

? 7. background (shorthand)

Badala ya kuandika kila property moja moja, unaweza kutumia shorthand kama hii:

body {
  background: url("picha.jpg") no-repeat center/cover fixed lightgray;
}

Mpangilio:
background: image repeat position/size attachment color;

✅ Muhtasari

• Unaweza kutumia rangi, picha, au zote mbili kwa background.

• Ukitumia shorthand, unaweza kuokoa nafasi na kupanga kwa haraka.

• Background inaweza kuwa ya kisasa na kuvutia ukiielewa vizuri.

? Maswali ya Kujitathmini

1. Property ipi hutumika kuweka picha kama background?
   a) background-color
   b) background-image
   c) image-bg
   d) bg-src

2. Ili kuzuia picha kurudiwa rudwa kwenye background, unatumia nini?
   a) background-repeat: repeat;
   b) background-repeat: center;
   c) background-repeat: no-repeat;
   d) background-repeat: cover;

3. background-position: center; inaweka picha wapi?
   a) Kwenye kona ya juu kushoto
   b) Katikati ya ukurasa
   c) Chini kabisa
   d) Juu kulia

4. Shorthand ya background inaweza kuunganisha nini kati ya hizi?
   a) color tu
   b) image, position, repeat, attachment, size, color
   c) font, color, margin
   d) width, height, opacity

5. background-attachment: fixed; inafanya nini?
   a) Background inasogea na ukurasa
   b) Background inaficha picha
   c) Background inabaki palepale hata ukurasa ukisogea
   d) Inafuta background