Kod Arşivi | Kod-Archive.Tr.Gg

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}