BU SİTE SATILIKTIR TASARIM + İÇERİK İLETİŞİMDEN BANA ULAŞABİLİRSİNİZ...

İLETİŞİM


E-mail adresiniz:
Başlık:
Mesajınız:

Bu site satılıktır.. İletişim için amtkrc@hotmail.com adresinden ulaşabilirsiniz...
UYHJHGJHJ

KİTAP ARA

internet kitapçınız kitapyurdu.com'dan binlerce kitaba ulaşabilirsiniz.

MENÜ

REKLAM

cirtlak-site

Css Background

CSS Background Özellikleri Arka Plan
 

Tanım : Background web sitemizin her alanında kullandığımız ve kullanabileceğimiz bir kod aklınıza gelen hemen hemen her html kodunda kullanabiliriz ve istediğimiz şekilde konumlandırabiliriz bunları örneklerle görelim

background-color:

background-color: kodumuzla elemetlere zemin rengi veririz Kullanabileceğimiz renk kodları ise alttaki şekildedir

hex-decimal kodu ile renk verme
#etiket {background-color: #FF0000;}

renk ismi ile renk verme

#etiket {background-color: red;}

RGB ile renk verme
#etiket {background-color: rgb(255,0,0);}


Örnek:

Zemin Rengimiz Kırmızı Olsun

Eğer renk vermek istemiyor ve tarayıcıların otomatik renk atamasını istemiyorsak alttaki kodu kullanabiliriz

#etiket {background-color: transparent;}


background-image:

background-image kodumuzla elemetlere zemin resmi veririz Kodlarımız örneklerle görelim
elementlere Zemin Resmi verme

#etiket {background-image: url(klasör/resim.png);}

Gördüğünüz Gibi resim verirken URL ile başlıyoruz ve resim yolunu parantez içinde belirtiyoruz parantezler içerisinde çift tırnak ve tek tırnak kullanabilirz örnek

#etiket {background-image: url("klasör/resim.png");}
#etiket {background-image: url('klasör/resim.png');}

 Eğer RESİM Klasörümüz ile CSS Klasörümüz ayrı ise resimlerimizi parantezden sonra ../ şeklinde resim yolunu vermeliyiz
örnek:
#etiket {background-image: url(../klasör/resim.png);} 

background-attachment:

background-attachment kodumuz sabitleme kodumuzdur diyelimki bir elemente arka plan resmi verdik ama bu resim sabit kalmasını istiyoruz peki bunu nasıl yapabiliriz bakalım
arka plan resmimizi sabitleme

#etiket: {background-attachment: fixed;}

Not: Genellikle sayfamızın genel zemin resmi için kullanılır (body)
Birde scroll verebiliriz bu kodumuzda ise serbest bırak diye biliriz kısacası biz arka plan resmimizi sabitlemedikce Tarayıcımız scroll olarak alıgılayacaktır.
 

background-position:

background-position kodumuz adı size cağrışım yapmıştır konumlandırma pozisyon kodumuzdur örnekle devam edelim

#etiket: {background-position: top left;}

Burada Konumlandırma etki yönlerinden bahsetmiştim yön yine aynı yanlız burada farklı bir durum var önce bunu anlatalım öğrenelim
şimdi yukarıdaki kodda background-position: top left; top left yaptık yani ÜST ve SOL peki neye göre ?

background-position: | ↔ ;
yukarıdaki gibi ilk kodumuz top ÜST ve ALT kısım 2. left İse SOL ve SAĞ kısım için yazıyoruz peki neler yazabiliriz bunlara bakalım

top left              > üste ve sola
top center         > üste ve ortala
top right            > üste ve sağa
center left          > ortala ve sola
center center     > ortala ve ortala
center right        > ortala ve sağa
bottom left         > alta ve sola
bottom center    > alta ve ortala
bottom right       > alta ve sağa

Bunların dışında rakamla konumlandırma yapabiliriz örneğin
background-position: 50% 50%; fakat burada durum tam tersine işliyor background-position: ↔ | ilk verdiğimiz değer sağa ve sola ikinci verdiğimiz değer üste ve alta oluyor tabi sadece % yüzde kullanmak zorunda değiliz pixel ve diğer birimleride kullanabiliriz bir örnek yapalım bununlailgili
Örnek kutumuzun altında ve sağında bg resmimiz olsun

burada kullanıdğımız kod şu şekilde:
background-position: bottom right;


background-repeat:

background-repeat kodumuz ise arka plan resmimizin tekrar edip etmeyeceğini belirleriz
soldan sağa doğru veya sağdan sola doğru tekrar ettirebiliriz veya üstten alta doğru tam tersi alttan üste doğruda tekrar edebilir kodlarımız ise şu şekilde
alttaki kodda zemin resmimizin sürekli olarak tekrar etmesini istedik yön belitmeden

#etiket {background-repeat: repeat}

örnek
alttaki kodumuzda ise soldan sağa veya sağdan sola doğru tekrar etmesini istedik
#etiket {background-repeat: repeat-x}



örnek

alttaki kodumuzda zemin resmimizin üstten alta yada alttan üste doğru tekrar etmesini istedik
#etiket {background-repeat: repeat-y}


örnek
alttaki kodumuzda zemin resmimizin tekrar etmemesini istedik
#etiket {background-repeat: no-repeat}

 

 

İp ucu:
Bu kodları tek tek kullanmak yerine kısa olarak ta kullanabliriz
#etiket {background: url(klasör/resim.png) top left no-repeat fixed;}
#etiket {background: url(klasör/resim.png) 50% 50% no-repeat;}
Şeklinde kısaltma yapabiliriz
 
 

NOT : ALINTIDIR , BEN SADECE DÜZENLEDİM...

internet kitapçınız kitapyurdu.com'dan binlerce kitaba ulaşabilirsiniz.



Önceki Sayfa
Sayfa Başına Git
İletişim
Twitter'da Paylaş
Delicious'a Kaydet
Reddit'e Kaydet
Digg'e Kaydet
Facebook'da Paylaş
Google'a Kaydet
Mix ile Paylaş
Hatalı Sayfa Bildir


Bugün Siteye ne Eklendi : Webmaster Bölümüne WEBMASTER NEDİR?,DATABASE NEDİR? ve SİTENİZİ GEREKSİZ REKLAMLARLA DOLDURMAYIN Eklendi..
Burdasın: Css Background ¦ Bugün: 2 ¦ Klik: 3 ¦ Online : ¦ IP: 18.232.88.17
:
internet kitapçınız kitapyurdu.com'dan binlerce kitaba ulaşabilirsiniz.

Copyright © 2011 Tüm Haklar Saklıdır...


Design by : Ahmet Kıraç

Kod-Archive ¦ Emre-Kirac ¦ Siteni Ekle ¦ Siteni Ekle ¦ Siteni Ekle ¦ Siteni Ekle
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol