CSS Background Özelliğini Kısaltma

Kodu kısaltmak için tüm arka plan özelliklerini tek bir özellikte belirtmek de mümkündür. Buna Shorthand denir.

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Yukarıdaki kod aşağıdaki şekilde kısaltılabilir;

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Kısayol özelliğini kullanırken özellik değerlerinin sırası şu şekildedir:

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

Diğer değerler bu sırada olduğu sürece özellik değerlerinden birinin eksik olması önemli değildir. Yukarıdaki örneklerde arka plan eki yani background-attachment özelliğini bir değeri olmadığından kullanmadığımızı unutmayın.

Özellik	Açıklama
background	Tüm arka plan özelliklerini tek bir bildirimde ayarlar
background-attachment	Arka plan resminin sabit mi yoksa sayfanın geri kalanıyla birlikte kaydırılarak mı kaydırılacağını ayarlar
background-clip	Arka planın boyama alanını belirtir
background-color	Bir öğenin arka plan rengini ayarlar
background-image	Bir öğenin arka plan resmini ayarlar
background-origin	Arka plan görsellerinin nereye konumlandırılacağını belirtir
background-position	Bir arka plan görüntüsünün başlangıç konumunu ayarlar
background-repat	Bir arka plan görüntüsünün nasıl tekrarlanacağını ayarlar
background-size	Arka plan görsellerinin boyutunu belirtir

CSS Eğitimi

11 Ekim 2023

Was this article helpful?

Bir yanıt yazınYanıtı iptal et