Takip Edin

CSS

CSS’te Arka Plan Özelliği

Arka plan, bir web sayfasının görsel sunumunda önemli bir rol oynar.

CSS, bir elemanın arka planını biçimlendirmek için arka planı renklendirme, görüntüleri arka plana yerleştirme ve onların konumlandırmalarını yönetme gibi çeşitli özellikler sağlar.

CSS’in sahip olduğu arka plan özellikleri şunlardır:

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

background-color Özelliği

background-color özelliği, bir elemanın arka plan rengini ayarlamak için kullanılır.

CSS’te renk değerleri, çoğu kez aşağıdaki formatlarda belirtilir:

  • renk adı ile(green gibi),
  • HEX değer ile(#00ff00 gibi),
  • RGB değeri ile(rgb(0,0,255) gibi)

background-image Özelliği

background-image özelliği, bir görüntüyü bir HTML elemanının arka planı olarak ayarlar.

Tarayıcı, bir elemanın tüm alanını doldurmak için varsayılan olarak arka plan resmini hem yatay hem de dikey olarak tekrarlar.

Not: Bir elemana arka plan görüntüsü uygularken seçtiğiniz görüntünün, elemanın sahip olduğu metin içeriğinin okunabilirliğini etkilemediğinden emin olun.

background-repeat Özelliği

background-repeat özelliği; bir resmin, bir elemanın arka planında nasıl tekrarlanacağını kontrol etmenizi sağlar. Bir arka plan resmini yatay ve dikey yönde tekrarlayacak şekilde ayarlayabileceğiniz gibi hiç bir yönde tekrarlama yapmayacak şekilde de ayarlayabilirsiniz.

Yukarıdaki örnekte arka plan resmi, repeat-x değeri ile x ekseni boyunca tekrarlanmıştır. Benzer şekilde, arka plan resmini y ekseni boyunca dikey olarak yinelemek için repeat-y değerini ya da yinelemeyi tamamen önlemek için no-repeat değerini kullanabilirsiniz.

background-position Özelliği

background-position özelliği, arka plan resminin pozisyonunu kontrol etmek için kullanılır.

Aşağıdaki örnekte arka plan resmi, sağ üst köşede konumlandırılmıştır.

background-attachment Özelliği

background-attachment özelliği, arka plan resminin görünür alana göre sabitlenip sabitlenmediğini ya da ilişkili olduğu içerikle birlikte kaydırılıp kaydırılmadığını belirler.

DeğerSöz DizimiAçıklama
scrollbackground-attachment: scroll;Varsayılan değerdir. Kullanıcı, web sayfasını kaydırdığında arka plan resmi, içerikle birlikte kaydırılır.
fixedbackground-attachment: fixed;Arka plan resmi sabittir, kaydırılamaz.

Arka Plan için Stenografi Özelliği

Kodu kısaltmak adına, tüm arka plan özelliklerini tek bir özelliğin içinde belirtmek te mümkündür. Bu özellik stenografi özelliği olarak adlandırılmaktadır.

Arka plan için stenografi özelliğini kullandığımızda özellik değerlerinin sıralaması şu şekilde olmalıdır:

background: color image repeat attachment position;

Dolayısıyla yukarıdaki örnek şu şekilde de oluşturulabilir:

Not: Diğerleri bu sırada olduğu sürece özellik değerlerinden birinin eksik olup olmaması önemli değildir.
Devamını oku

Popüler

error: Content is protected !!