CSS Background

CSS Background properti digunakan untuk menentukan efek latar belakang suatu elemen .


Properti CSS Yang digunakan untuk efek latar belakang :

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


Properti background-color menentukan warna latar belakang dari elemen .

Warna latar belakang dari halaman didefinisikan dalam selektor body:

body { background-color : # b0c4de ; }



Warna latar belakang dapat ditentukan oleh :

  • name - color name , seperti " red"
  • RGB - nilai RGB , seperti " rgb ( 255,0,0 ) "
  • Hex - nilai hex , seperti " # ff0000 "

Pada contoh di bawah ini, h1 , p , dan elemen div memiliki warna latar belakang yang berbeda :

h1 {background-color: # 6495ed ; }
p {background-color: # e0ffff ; }
div {background-color: # b0c4de ; }

background Image

Properti background-image menggunakan gambar sebagai latar belakang dari elemen. Secara default , gambar diulang sehingga meliputi seluruh elemen . Latar belakang gambar untuk halaman dapat diatur seperti ini :

body {background-image : url ( ' paper.gif ' ) ; }
 

Background Image - repeat Horizontal atau Vertikal

Secara default , properti background-image mengulangi gambar secara horisontal dan vertikal. Beberapa gambar harus diulang hanya secara horizontal atau vertikal. Bila menggunakan properti singkatan untuk background, urutan nilai properti nya adalah :
  • background-color
  • background-image
  • background-repeat
  • background- attachment
  • background-position

Tidak masalah jika salah satu dari nilai properti yang hilang.


Contoh Penggunaan CSS Background


PropertyKeteranganNilaiCSS
backgroundAtur semua properti background dalam satu propertibackground-color
background-image
background-repeat background-attachment background-position
inherit
1
background-attachmentMenentukan apakah gambar latar belakang tetap atau berulang dengan sisa halamanscroll
fixed
inherit
1
background-colorAtur warna backgroundcolor-rgb
color-hex
color-name
transparent
inherit
1
background-imageAtur baground sebagai gambarurl(URL)
none
inherit
1
background-positionAtur posisi gambar backgroundleft top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
inherit
1
background-repeatAtur jika gambar akan diulangrepeat
repeat-x
repeat-y
no-repeat
inherit
1
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda