İlginizi Çekebilir

CSS Arka Plan Özellikleri

CSS Arka Plan Özellikleri

Web sitesinin veya HTML dokümanımızın arka plan özelleştirmelerini yaparken HTML ile belli bir yere kadar yapmaktayız. CSS ile bu özelleştirmeleri daha biçimsel ve görsel hale getirerek görsel uyumu en iyi hale getirebiliriz. CSS Arka Plan özellikleri, HTML ile yapılan özelleştirme temellerine dayalıdır. CSS Arka plan özelliklerini ayarlarken kullandığımız değerlere ayrıntılı bir şekilde inceleyelim.

Arka plan rengi belirleme (background-color)

Web sitemizin arka plan tasarımını yaparken, düz renk şeklinde yapabiliriz.
Renklendirme yaparken background-color parametresini kullanmaktayız.
Renklendirme yaparken HTML Renk kodlarını kullanmaktayız.

CSS Arka Plan Özellikleri
 
 

Arka plan resim ekleme (background-image)

Arka plana, renk haricinde resim eklemesi yapabiliriz. Google‘da bulunan çeşitli web site background, texture resimlerini kullanarak daha şık hale getirebiliriz.
Resim eklerken background-image parametresini kullanmaktayız.
Resim eklemesi yaparken eklenecek olan resimi dosya yolu olarak veya resim linki olarak ekleyebiliriz.

CSS Arka Plan Özellikleri

 
 

Arka plan resminin konumlandırılması (background-position)

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

topÜst konum
bottomAşağı konum
centerOrta konum
rightSağ konum
leftSol konum
top centerÜst orta konum bottom centerAlt orta konum
top rightÜst sağ konum bottom rightAlt sağ konum
top leftÜst sol konum bottom leftAlt sol konum
center centerOrtalanmış konum right topSağ üst konum
center rightOrta sağ konum right bottomSağ alt konum
center leftOrta sol konum right centerSağ orta konum
left topSol üst konum   
left bottomSol alt konum   
left centerSol orta konum   

CSS Arka Plan Resim Konumlandırma

 
 

Arka plan resminin sabit durması (background-attachment)

Arka planda eklediğiniz resimin, sayfanın altına doğru inildiği zaman, sabit şekilde yukarda durmasını veya aşağı indikçe resminde aşağı inmesini ayarlayabilirsiniz.
background-attachment parametresi kullanılarak yapılmaktadır. Çeşitli değerler alarak özelleştirme yapılmaktadır.

fixedArka plan resmini sabit olarak tutar.
scrollArka plan resmini, içerikle beraber aşağı kaydırır.
FIXED

CSS Arka Plan Resim Sabitliği Fixed

SCROLL

CSS Arka Plan Resim Sabitliği Scroll

 
 

Arka plan resminin tekrarı(background-repeat)

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

repeatArka plan resmi tekrar edilir.
no-repeatArka plan resmi tekrar edilmez.
repeat-xArka plan resmi x eksenine doğru tekrar edecektir.
repeat-yArka plan resmi y eksenine doğru tekrar edecektir.

CSS Arka Plan Resim Tekrarı

Yorum Yap

Yorum Yap