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: kodmuzla 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');}
İp Ucu 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);}
Ön İzleme:
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 palan 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 olark 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
