HTML sayfalarımızda birçok element bulunur. Bizlerde bu elementlere birçok stil verebiliriz. Bu yazımızda en önemli işlemlerden birisi olan CSS arka plan işlemleri konusunu işleyeceğiz.

CSS ile yapabileceğimiz arka plan işlemlerini görelim.

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

Öncelikle arka plan işlemlerini yaparken bazı yerlerde renkleri kullanabiliriz. Eğer bu konuda eksikleriniz var ise ‘HTML Renk Kodları ve Kullanımları‘ isimli yazımızı okuyabilirsiniz.

CSS Background-color Kullanımı

Backround-color parametresi ile HTML sayfamızda bulunan bir elementin arka plan rengini değiştirebiliriz. Hemen bir kaç örnekle nasıl yapıldığını öğrenelim.

body {
  background-color: red;
}

div { 
    background-color: #FF0000;
}

h1 {
  background-color: white;
}

p {
  background-color: white;
}

CSS Background-image Kullanımı

Bu parametre ile HTML elementlerimizin arka planlarına resim ekleyebiliyoruz. Background-image ifadesinden sonra parantez içerisine, resmin dosya adresini yazmamız yeterli. Hemen bir örnek ile görelim 

body {
  background-image: url("resim-ismi.jpg");
}

CSS Background-repeat Kullanımı

Background-repeat özelliği resim büyüklüğü küçük geldiğinde (erkana tam oturmadığında), resmin tekrar edip etmeyeceğini veya nasıl tekrar edeceğini belirlediğimiz parametredir. Bu parametrelerin alabileceği değerleri görelim.

  • no-repeat : Tekrar edilmeyecektir
  • repeat : Hem sağa, hem aşağı tekrarlanacaktır. (background-repeat özelliği yazılmasa varsayılan olarak bunu yapacaktır.)
  • repeat-x : Sadece sağa doğru tekrar edecektir
  • repeat-y : Sadece aşağı doğru tekrar edecektir

Örnek kullanımlarını görelim. 

body {
  background-image: url("resim-ismi.jpg");
  background-repeat: no-repeat;
}

Diğer kullanımı : 

body {
  background: url('resim-ismi.jpg') no-repeat;
}

CSS Background-position Kullanımı

Background-repeat parametresine no-repeat değerini vermişsek, resmin konumu belirleyebileceğimiz parametredir. Şimdi bu parametrenin alabileceği değerleri görelim.

  • background-position: top left; (Üst-sol)
  • background-position: top center; (Üst-orta)
  • background-position: top right; (Üst-sağ.)
  • background-position: center left; (Orta-sol)
  • background-position: center center; (Orta-orta)
  • background-position: center right; (Orta-sağ)
  • background-position: bottom left; (Alt-sol)
  • background-position: bottom center; (Alt-orta)
  • background-position: bottom right; (Alt-sağ)
  • background-position: x% y%; (Görselimize yatay (x) ve dikey (y) olarak yüzde üzerinden pozisyon vermemizi sağlar. Örneğin background-position: 10% 10% ifadesi görselin üstten ekranın yüzde 10’u kadar aşağıya, soldan ekranın yüzde 10’u kadar sağa kaymasını sağlar)
  • background-position: xpos ypos; (Görselimize yatay (x) ve dikey (y) olarak pixel üzerinden pozisyon vermemizi sağlar. Örneğin background-position: 100px 100px ifadesi görselin üstten 100 piksel aşağıya, soldan 100 piksel sağa kaymasını sağlar)
Bu yazı dikkatini çekebilir.   CSS Nedir ? Ne İşe Yarar ?

Hemen örnek kullanımını görelim. 

body {
  background-image: url("resim-ismi.jpg");
  background-repeat: no-repeat;
  background-position: center right;
}

Diğer kullanımı :

body {
  background: url('resim-ismi.jpg') no-repeat bottom left;
}
body {
  background: url('resim-ismi.jpg') no-repeat 10% 50%;
}

CSS Background-attachment Kullanımı

Arka plan resminin sabit kalıp kalmayacağını background-attachment parametresi ile belirleriz.

Eğer background-attachment parametresine scroll değerini verirse arka plan görseli arkada sabit kalır. Ayrıca bu özellik varsayılan olarak atanır. Yani ekstra olarak yazmanıza gerek yok. Örnek görelim.

body {
  background-image: url("resim-ismi.jpg");
  background-attachment: scroll;
}

Eğer arka plan görselinin sabit olarak kalmasını istiyorsanız fixed değerini atamanız yeterli. Bu sadece sayfada aşağı indikçe, resimde sayfa ile birlikte yukarı çıkacaktır. 

body {
  background-image: url("resim-ismi.jpg");
  background-attachment: fixed;
}

Bu yazımızda CSS arka plan işlemleri konusunu işledik. Ayrıca diğer CSS derslerimizi de okumak isterseniz buradan tümüne ulaşabilirsiniz.