CSS Arkaplan BackGround Biçimlendirme – Ahmet Cansever
Pazartesi , 18 Aralık 2017
Anasayfa » CSS » CSS Arkaplan BackGround Biçimlendirme

CSS Arkaplan BackGround Biçimlendirme

HTML öğelerinin arkaplan özelliklerini değiştirmek için CSS Arkaplan özelliklerinden faydalanılır. CSS ile arkaplan biçimlendirmede kullanılan özellikler şunlardır.

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

 

background-color Kullanımı :

Bu özelliği kullanarak HTML öğelerinin arkaplanına bir renk verebiliriz. Arkaplan rengini değiştireceğimiz öğe bütün sayfa olabileceği gibi başlık etiketleri, paragraf etiketi, tablo veya div etiketleri de olabilir. Bir örnekle bu durumu açıklayalım.

Aşağıdaki örnekte <h1> etiketi <p> etiketi, <table> etiketi ve div için ayrı ayrı arkaplan rengi ayarlayacağız.

 

style etiketleri arasında tanımladığımız  CSS background-color özellikleri sonucu aşağıdaki sonucu göreceğiz.

Background Image:

Background-image özelliği, bir öğenin arka planı olarak kullanılacak bir görüntüyü belirtir.

Varsayılan olarak, resim tüm elemanı kapsayacak şekilde tekrarlanır.

Bir sayfanın arka plan resmi şu şekilde ayarlanabilir.

Eğer arkaplana bir resim verilecekse dikkat edilmesi geren nokta sayfadaki yazıların okunabilirliğinin kolay olmasıdır.

Varsayılan olarak, background-image özelliği bir görüntüyü hem yatay hem de dikey olarak tekrarlar. Bu kimi zaman istenmeyen görüntülerin oluşmasına neden olabilir.

background-repeat özelliği kullanılarak resmin yatayda, dikeyde,her iki yönde tekrarlanacağı veya hiç tekrarlanmayacağı kararı verilerek gerekli ayar yapılabilir.

Yukarıdaki örnekte resmin sadece horizantal (yatay) olarak tekrarı sağlanmıştır.

background-attachement özelliği ile sayfa arkaplanına eklemiş olduğumuz resmin kaydırma çubukları kullanıldığında sabit olarak kalacağı ya da içerikle birlikte hareket edeceği ayarı yapılabilir.

Aşağıdaki örnekte arkaplan resminin tam ekran olarak ayarlanması ve sabit bir şekilde sayfada kalması işlenmiştir.

CSS Arkaplan Resmini Tam Ekran Yapma

 

Hakkında Ahmet C

Yorum Yap

Wordpress Tema indir