Background Properties CSS

 Cascading Style Sheets (CSS) waa luqadda loo isticmaalo in lagu qurxiyo loona habeeyo muuqaalka bogagga webka. Mid ka mid ah astaamaha ugu muhiimsan ee CSS waa awoodda lagu hagaajin karo asalka (background) ee walxaha HTML. Background properties ee CSS waa set-ka guryaha loo isticmaalo in lagu qeexo muuqaalka asalka, kaas oo ka kooban midabka, sawirka, booska, ku celcelinta, iyo cabbirka. Qodobadan hoos ku xusan waxay sharxayaan guryaha kala duwan ee background-ka ee CSS iyo sida loo isticmaalo si loo habeeyo asalka walxaha HTML.

Background Properties ee CSS

1. background-color

Guryaha background-color wuxuu qeexaa midabka asalka ee walxaha HTML. Midabkan waxaa lagu qeexi karaa magac midab (sida "red"), kood HEX (sida "#ff0000"), kood RGB (sida "rgb(255, 0, 0)"), ama kood HSL (sida "hsl(0, 100%, 50%)"). Tusaale:

css

div {
    background-color: #f4f4f4;
}

Tusaalahan kor ku xusan, div-ga waxaa loo dejiyay inuu yeesho midab asalka ah oo ah #f4f4f4 (midab cawl khafiif ah).

2. background-image

Guryaha background-image wuxuu u ogolaanayaa in sawir loo isticmaalo asalka walaxda HTML. Sawirka waxaa lagu qeexi karaa URL uu ka yimid, waxaana sawirkan si otomaatig ah loogu dhejin doonaa asalka walaxda. Tusaale:

css

div {
    background-image: url('image.jpg');
}

Tusaalahan, sawirka "image.jpg" wuxuu ka soo muuqan doonaa asalka div-ga.

3. background-repeat

Marka sawir loo isticmaalo asalka, guryaha background-repeat wuxuu qeexaa haddii sawirkaas la celin doono iyo sida loo celin doono. Qiimaha caadiga ah waa repeat, kaas oo sawirka ku celinaya jihada toosan iyo midda taagan labadaba. Waxa kale oo jira qiimayaal kale sida no-repeat (aan la celin), repeat-x (celin toosan kaliya), iyo repeat-y (celin taagan kaliya). Tusaale:

css

div {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
}

Tani waxay ka hortagaysaa in sawirka asalka la celiyo, waxaana sawirka muuqanayaa hal mar oo kaliya.

4. background-position

Guryaha background-position wuxuu qeexaa booska sawirka asalka gudaha walaxda. Waxa loo isticmaali karaa eray bixinno sida top, right, bottom, left, center, ama xisaabta joqoraafi (pixels ama boqolkiiba). Tusaale:

css

div {
    background-image: url('image.jpg');
    background-position: center;
}

Sawirka asalka ayaa la dhigayaa bartamaha walaxda div.

5. background-size

Guryaha background-size wuxuu qeexaa cabbirka sawirka asalka. Waxaa loo dejin karaa cabbir gaar ah (pixels ama boqolkiiba), ama eray bixinno sida cover (sawirka wuxuu daboolayaa walaxda oo dhan) ama contain (sawirka wuxuu ku jiri doonaa gudaha walaxda isagoo aan ku faafin xadkiisa asalka ah). Tusaale:

css

div {
    background-image: url('image.jpg');
    background-size: cover;
}

Tani waxay ka dhigi doontaa in sawirka asalka uu daboolo div-ga oo dhan, iyada oo aan loo eegayn cabbirka sawirka asalka ah.

6. background-attachment

Guryaha background-attachment wuxuu qeexaa haddii sawirka asalka uu la soconayo walaxda marka la rogrogayo bogga (scrolling) ama haddii uu go'an yahay booskiisa. Qiimaha fixed wuxuu sawirka ka dhigaa mid go'an, halka scroll uu sawirka la socdo walaxda. Tusaale:

css

div {
    background-image: url('image.jpg');
    background-attachment: fixed;
}

Sawirka asalka ayaa go'an, mana dhaqaaqayo marka bogga la rogrogayo.

Gabagabo

Guryaha background-ka ee CSS waa kuwo muhiim ah oo awood siinaya naqshadeeyayaasha webka inay abuuraan muuqaal asalka oo soo jiidasho leh. Iyadoo la adeegsanayo guryahan, waxaa suurtagal ah in lagu daro midabyo, sawirro, iyo habab kale oo asalka ah si loo hagaajiyo quruxda iyo naqshadaynta bogagga webka. Marka si sax ah loo isticmaalo, background properties waxay noqon karaan aalad awood leh oo loogu talagalay abuurista naqshadeynta bogga oo gaar ah oo soo jiidasho leh