Yazilim Mutfagi Dersleri ( CSS ) Ders 2 – Background

Css Tanimlamalari

Background

Background Color

background-color özelligi bir elementin arkaplan rengini ayarlamak için kullanilir.

Eger sayfanin arkaplan rengini degistirmek istiyorsaniz body seçicisini kullanmaniz gerekir.

Arkaplan rengini 3 farkli sekilde belirtebiliriz.

• renk ismi – ingilizce renk isimleri kullanilir – "red","blue" vb.
• RGB – Renklere ait rgb kodlari kullanilabilir "rgb(255,255,0)"
• HEX – renkler için hex degerler verilerek "#ffff00"

Renklere ait degerleri almak için asagidaki programi kullanabilirsiniz. Bu program ekranda fare imlecinin bulundugu yerdeki renk degerini almanizi saglar. Çok kullanisli bir araçtir.

Programi buradan indirebilirsiniz.

Asagidaki örnekte h1,p ve div elementleri için ayri ayri arkaplan rengi tanimlanmistir.

Background Image

background-image özelligi bir html elementi için arkaplan olarak bir resmin kullanilmasini saglar. Default olarak, Eger resim elementin boyutlarindan küçükse, atanan resim x ve y kordinatlarinda tekrarlanarak tüm elementin arkaplanini kaplar.

Sayfanin arkaplanina bir resim asagidaki gibi koyulabilir.

Background Image – Dikeyde ve Yatayda Tekrarlanmasi

Varsayilan olarak, resmin yatayda ve dikeyde tekrarlanarak tüm elementin arkaplanini kapladigini söylemistik. Bu özelligi background-repeat özelligini kullanarak istedigimi gibi ayarlayabiliriz.

Asagidaki örnekte sayfa arkaplani olarak atadigimiz resmi x kordinatinda yani yatayda tekrarlatiyoruz.

background-repeat özelligi asagidaki degerleri alabilir.

• no-repeat : dikeyde ve yatayda tekrarlanma olmaz.
• repeat-x : sadece yatayda tekrarlanma olur.
• repeat-y : sadece dikeyde tekrarlanma olur.
• repeat : hem dikeyde hemde yatayda tekrarlanma olur.
• inherit : tekrarlanma bilgisi elmente ait bir üst elementten miras alinir.

Arkaplan resmi kullanirken, kullandiginiz resmin elementin içindeki yazilari okunamaz hale getirmemesini dikkat etmelisiniz.

Background Image – Resmin pozisyonunu ayarlamak

Arkaplan resmi için pozisyon ayarlamasi yapacaksaniz, background-repeat için no-repeat degerini kullanmalisiniz.

Arkaplan için pozisyon ayarlamak için background-position özelligi kullanilir, basit bir örnek verecek olursak.

Simdi ise bir div için arkaplan resmi atayip anlattiklarimiz pekistirelim.

Sirasiyla farkli css yapilari uygulayacagiz.

• Örnek 1
  divOrnek
  {
  background-image:url('css.png');
  width:90%;
  height:200px;
  }

  Gördügünüz gibi sadece bir arkaplan resmi atamasi yaptik. Varsayilan olarak atama yaptigimiz resim dikey ve yatayda tekrarlanarak tüm divin arkaplanini kapsadi. Ayrica resim yazinin okunabilirliliginide azaltti. Bu dikkat etmemiz gereken bir durumdur.

• Örnek 2
  divOrnek
  {
  background-image:url('css.png');
  background-repeat:repeat-x; width:90%;
  height:200px;
  }

  Bu sefer ise resmi sadece yatayda tekrarlattik.

• Örnek 3
  divOrnek
  {
  background-image:url('css.png');
  background-repeat:repeat-y; width:90%;
  height:200px;
  }

  Bu sefer ise resmi sadece dikeyde tekrarlattik.

• Örnek 3
  divOrnek
  {
  background-image:url('css.png');
  background-repeat:no-repeat; width:90%;
  height:200px;
  }

  Resim için no-repeat degerini atamadigimiz zaman ise örnekteki gibi elementin sol en üstünde sadece bir kez çikti..

• Örnek 4
  divOrnek
  {
  background-image:url('css.png');
  background-repeat:no-repeat; background-position:right-top; width:90%;
  height:200px;
  }

  Resim için no-repeat degerini atamadigimiz ve pozisyon içinde top ve right (en üst ve sag) degerlerini atadigimiz zaman ise örnekteki gibi elementin sag en üstünde sadece bir kez çikti..

Background – Kisa Kullanim

Asagidaki örnekte görebileceginiz gibi birden fazla özellik için deger atamasini tek bir satirdada yapabiliriz. Bu yöntem css’in okunurlulugunu azaltmasina ragmen tek bir satirda birden fazla atama yapabilmemizi saglayarak zaman kazandirmaktadir.

Kisa kullanim için background özelligini kullaniyoruz, verdigimiz degerler asagidaki siraya göre degerlendirilir.

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

Bu siradaki bazi degerleri vermemis olmamiz önemli degildir. Yukaridaki siraya göre tarayici degerlerin hangi manaya geldigini anlayabilir.

Sabit Arkaplan Ayarlamak

Eger bir sayfaya arkaplan olarak atadigimiz resmin scroll islemi sirasinda sabir yerinde kalmasini istiyrsak background-attachment özelligine fixed degerini vermemiz gerekir.

Tüm Arkaplan Özelliklerini Açiklamalari ile Beraber Asagidaki Listede bulabilirsiniz.

IE8 de dahil hiç bir IE versiyonu inherit degerini desteklenmez.