Backgrounds

Background so'zini orqa fon deb tushunib olsak bo'ladi.

Css da background xususiyati orqali elementni orqa fon effectlarini o'zgartirish uchun ishlatiladi

Bu darsda quyidagi background xususiyatlari haqida gaplashamiz.

• background-color (fon rangi)
• background-image (fon rasmi)
• background-repeat (fon da rasm takrorlanishi)
• background-attachment (fon da )
• background-position (fon da rasm positsiyasi)

O'rganadigan xususiyatlar ko'p. Shuning uchun bir boshdan boshlaymiz.

CSS background-color

Background color degani fon rangi deb tarjima qilsak bo'ladi.

background-color xususiyatida elementning fon rangini o'zgartirsak bo'ladi.

Namuna

body 
{
   background-color: aquamarine;
}

bacground-color xususiyatida rangning qiymatini quyidagicha yozish mumkin:

• rangning nomi bilan - 'red', 'yellow'
• HEX ko'rinishida - '#fc0303', '#fc0303'
• RGB ko'rinishida - 'rgb(255,0,0)', 'rgb(255,255,0)'

Boshqa elementlar bilan namuna

background-color xususiyatini xohlagan html elementlari uchun ishlatsa bo'ladi.

Namuna

h1 {
  background-color: indianred;
}
div {
  background-color: blue;
}
p {
 background-color: yellow;
}

Opasity / Transparency

Opacity va Transparency so'zlarini shaffoflik, tiniqlik deb tushunib olsak bo'ladi. Ikkala so'zni ham ma'nosi bir xil.

Css ning opasity xususiyatida elementning qanchalik tinik ko'rinishini belgilaydi.

Opasity xususiyati 0.0 dan 1.0 gacha bo'lgan qiymatlarni qabul qiladi. 1.0 bu default qiymatdi. 1.0 da element boricha ko'rinadi. Qiymat 1 dan kamaygan sari tiniqlik ham kamayib ketadi.

opacity: 0.1

opacity: 0.5

opacity: 1.0

Namuna

img {
  opacity: 0.1;
}

Transparency using RGBA

Tepadagi namunaga o'xshab opasity xususiyati elementning bolalariga ta'sir qilishini xohlamasangiz RGBA dan foydalaning.

RGBA degi RGB bu (Red, Green, Blue ) bo'lib ranglarni berish usuli hisoblanadi. A bu Alpha bo'lib shu yozilgan ranglarni tinikligini bildiradi. Alpha ham xuddi opasity kabi ishlaydi va 0.0 dan 1.0 gacha bo'lgan qiymatlarni oladi.

Namuna

div {
   background-color: rgba(255, 68, 97, 0.1);
}
Natija

Background Image

background-image xususiyati orqali fon da rasmlarni ishlatsak bo'ladi.

Default holatda fonda ishlatilgan rasm elementni butunlay qoplab olishga harakat qiladi.

Agar rasm uzunligi element uzunligidan kichik bo'lsa rasm takroriy chiqib elementni fon qismini egallab oladi.

Namuna

body {
  background-image: url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm");
}   

Eslatma background-image dan foydalanganda ko'zni og'ritmaydigan va tekslarni o'qishga xalaqit bermaydigan rasmdan foydalaning.

CSS Background Repeat

Repeat so'zi takrorlash, qaytarish degan ma'nolarni anglatadi.

Default holatda background-image xususiyati rasmni gorizantal va vertikal bo'ylab qayta ishlatishga urinadi.

Sababi agar rasmning uzunliklari elementning uzinliklaridan kichik bo'lsa rasm elementni fonini egallab olishga harakat qiladi.

Namuna

body {
 background-image: url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm");
}
    

Sintaksis

background-repeat: repeat | repeat-x | repeat-y | no-repeat;          

• repeat - default qiymat hisoblanadi. Bunda rasm qayta chiqadi va butunlay element fonini egallab oladi.
• repeat-x - bunda rasm faqat x o'qi bo'ylab (gorizantal) qayta chiqqadi.
• repeat-y - bunda rasm faqat y o'qi bo'ylab (vertikal) qayta chiqadi.
• no-repeat - bunda rasm qayta chiqmaydi. Birmarta chiqadi xalos.

Namuna

body {
  background-image: url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm");
  background-repeat: repeat-x;
}

background-repeat: no-repeat

Namuna

body {
  background-image: url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm");
  background-repeat: no-repeat;
}

CSS background-position

Position degani joy, joylashgan joyi, turgan positsiyasi deb tushunib olsak bo'ladi. Demak background-position degan orqa fon joylashgan joyi deb tushinsak bo'ladi.

background-position xususiyati orqa fon rasmini joylashtirish uchun ishlatiladi.

Sintaksis

background-position: value; 

Kalit so'zlar tarjimada.

• top - tepa qism
• bottom - pastgi qism
• right - o'ng tomon
• left - chap tomon
• center - markazni anglatadi

Namuna

body {
   background-image: url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm");
   background-repeat: no-repeat;
   background-position: center;
}

CSS Background Attachment

background-attachment xususiyati fonga berilgan rasm elementning foni bilan birga skrol bo'lishi kerakmi yo joyida yopishib turishi kerakmi shuni anglatadi.

Namuna

body {
   background-image: url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm");
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
}

Default holatda scroll qiymat bo'ladi.

Namuna

body {
    background-image: url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: scroll;
}

CSS Background Shorthand

Shorthand degani qisqacha yozish usuli deb tushunib olsak bo'ladi.

Bundan oldin o'rgangan backgrount-..... xususiyatlarini bitta qatorda yozish imkoniyati mavjut.

Namuna

body {
   background-color: indianred;
   background-image: url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm");
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: scroll;
}

Shu yozilgan kodlarni qisqacha yozilishi.

Namuna

body 
{
 background: indianred url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm") no-repeat right top scroll;
}

Eslatma. Qisqacha yozish usulida quyidagi background xusisiyatlarini yozish mumkin.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Agar qaysidir qiymat yozilmasa ham bo'ladi. Boshqa tartibda yozilsa ham bo'ladi.

CSS background-size

background-size xususiyatida fonga qo'yilgan rasmni uzinliklari ko'rsatiladi.

Sintaksis

background-size: auto | cover | contain | length| initial | inherit

Namuna

body {

background: url("https://via.placeholder.com/300/3e7aa7/ffffff/?text=Rasm"); background-repeat: no-repeat;

background-size: cover;

}