CSS

CSS Arka Planlar

CSS Arka Planlar

Bu yazımızda HTML sayfanızın ya da sayfanızda bir bölümün arka plan rengini, resmini ve özelliklerini nasıl belirleyeceğiniz ile ilgili bilgiler bulunmaktadır. CSS arka planlar bir HTML nesnesine arka plan eklemenizde ve biçimlendirmemize yardımcı olur.

Arka Plan eklemek için kullanacağımız CSS kodlarını tanıyalım.

background-color : Bir bölüm veya sayfanın arka plan rengini belirlememizi sağlar.
background-image : Bir bölüm veya sayfanın içinde arka plan resmi kullanmamızı sağlar.
background-repeat : Kullandığımız arka plan resminin tekrar edip etmeyeceğini belirtmemizi sağlar.
background-attachment : Arka planın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar.
background-position : Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla hizalanma şeklini belirleme şansına sahip oluruz.
background : Yukarıdaki tüm özellikleri tek bir seçici ile gerçekleştirmemizi sağlar.

 

CSS Arka Planlar Nasıl Kullanılır?

 

  • background-color

Bir sayfanın veya bölümün arka plan renk tanımlamasını yaparken kullandığımız seçicidir. Kullanım şeklinde ise HTML Renk Kodları’nı kullanmaktayız.

Örnek olarak bir bölümün renk tanımlamasını kırmızı olarak belirleyelim.

body {
 background-color: red;
}

 

  • background-image

Bir arka plana renk eklemesi yapabildiğimiz gibi bir resim eklemesi yapabilmemizde mümkündür. Resim ekleme işlemini yaparken kullandığımız parametre ise background-image‘dir. Bir web sitesine arka plan resmi eklerken Google‘da bulunan telif hakkına tabi olmayan resimleri kullanabilir veya hazırlamış olduğumuz bir resmi siteye ekleyebiliriz.

Örnek olarak ise hazırlamış olduğumuz bir arka plan resmini bir siteye ekleyelim.

body {
 background-image : url('https://www.wmpaylasim.com/images/background-image.jpg');
}

 

  • background-repeat

Arka planda kullanılan resmin tekrar edilip edilmeyeceğini ayarlamak için kullanılır. Tekrar etmesini ayarlarken çeşitli değerler kullanılmaktadır.

  1. repeat : Arka plan resmini tekrar etmemizi sağlar.
  2. no-repeat : Arka plan resminin tekrar edilmemesini sağlar.
  3. repeat-x : Arka plan resmi x eksenine doğru tekrar edecektir.
  4. repeat-y : Arka plan resmi y eksenine doğru tekrar edecektir.

Örnek olarak ise bir arka plan resmini tekrar edecek şekilde kodlama yapalım.

body {
 background-image : url('https://www.wmpaylasim.com/images/background-image.jpg');
 background-repeat : repeat;
}

 

  • background-attachment

Arka planda eklediğimiz bir resmin, sayfanın altına doğru inildiği zaman sabit şekilde yukarda durmasını veya aşağı indikçe resminde aşağı inmesini sağlayabiliriz.

Örnek olarak ise arka plan resmini sabit olarak yukarıda tutalım.

body {
 background-image : url('https://www.wmpaylasim.com/images/background-image.jpg');
 background-attachment : fixed;
}

 

  • background-position

Arka plan resminin konumunu belirlemek için background-position parametresi kullanılırız. x ve y eksenlerinin değer almasıyla konumlandırma yapılır. Konumlandırma yaparken çeşitli değerler kullanılmaktadır.

  1. top : Üst konumu temsil eder.
  2. bottom : Alt konumu temsil eder.
  3. center : Orta konumu temsil eder.
  4. right : Sağ konumu temsil eder.
  5. left : Sol konumu temsil eder.

Bu değerleri birlikte kullanmamızda mümkündür. Mesela sol üst değerini kullanmak için top left şeklinde değer atayabiliriz.

Bir örnek ile birlikte arka plan resmimizi sayfanın ortasına nasıl koyacağımızı görelim.

body {
 background-image : url('https://www.wmpaylasim.com/images/background-image.jpg');
 background-position : center;
}

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu