CSS da orqa fon bilan ishlash

CSS da asosiy fon va orqa fon uchun javob beradigan stil xususiyatlari quyidagilardan iborat:

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

Bu stil xususiyatlarini birma-bir ko'rib chiqamiz.


Background-color

Background-color - biror elementni yoki butun veb sahifani orqa foniga rang berishni ifodaylaydi va quyidagicha qo'llanniladi.

Namuna:

body {

   background-color: lightblue;

}

O'tgan darsimizda aytganimizdek, CSSda ranglar quyidagicha e'lon qilinadi.


Rangning o'zining nomi bilan - masalan "red"

RGB ning qiymati orqali - masalan "rgb(255, 0, 0)"

Rangning 16 lik sanoq sistemasidagi qiymati orqali - masalan "#2196F3"

Quyidagi misolda h1, div va p elementlariga turli xil orqa fonlarni o'rnatamiz.

Namuna:

h1 {

   background-color: green;

}

div {

   background-color: lightblue;

}

p {

   background-color: yellow;

}

Background-image

Background-image - orqali istalgan elementni yoki butun veb sahifani foni sifatida rasm qo'yish mumkin. U quyidagicha e'lon qilinadi.

Namuna:

body {

   background-image: url("tutorials.jpg");

}

Siz shunday rasm tanlashingiz kerakki, u foydalanuvchilarga halaqit qilmasin, matnlarni o'qishda ham qiyinchilikka duch kelmasin.


Orqa fonning takrorlanishi

Siz rasmni biror veb sahifaga o'rnatganizdan keyin, xohlaysizmi yo yo'qmi, u rasm gorizontaliga va vertikaliga takrorlanadi.

Bu degani siz ekran o'lchamidan kichkina rasm tanlasangiz ham, ekran to'ldirguncha takrorlanadi.

Buni oldini olish maqsadida x o'qi bo'yicha yoki y o'qi bo'yicha takrorlanadigan qilib o'zimiz sozlashimiz mumkin.

Namuna:

body {

   background-image: url("gradient_bg.png");

   background-repeat: repeat-x;

}

Bundan tashqari, rasmni joylashuvga ko'ra e'lon qilsa ham bo'ladi:

Namuna:

body {

   background-image: url("img_tree.png");

   background-repeat: no-repeat;

   background-position: right top;

}

Background Attachment

background-attachment ning - qiymati orqali rasmning o'rnini oldindan belgilangan joyga o'rnatiladi.

Namuna:

body {

   background-image: url("img_tree.png");

   background-repeat: no-repeat;

   background-position: right top;

   background-attachment: fixed;

}

Background - Shorthand

Background - Shorthand orqali rasmning bir nechta qiymatlarini, bir vaqtning o'zida kiritishimiz mumkin. Shorthandni ma'nosi qisqa qilib aytganda qisqa usul, oson yo'l deb tushunishingiz mumkin.

Namuna:

 body {

   background: #ffffff url("img_tree.png") no-repeat right top;

}

Background - "Shorthand"ning qiymatlari quyidagi tartibda beriladi:

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

Tutorials.uz - telegram kanali O'zbekiston bo'ylab bepul dasturlash darslarini ishlab chiquvchi holis kanal.