Pazartesi , 11 Aralık 2017
Anasayfa » WEB » CSS » CSS Arka Plan

CSS Arka Plan

CSS Arka Plan Kullanımı

HTML öğelerinin arka plan efektlerini tanımlamak için CSS Arka plan özeliklerinden faydalanabilirsiniz. Şimdi bu özelliklerin neler olduğuna ve nasıl kullanıldıklarına bakalım;

1-background-color

background-color özelliği bir HTML öğesinin arka plan rengini belirlemenizi sağlar.

Yukarıdaki örnekte sayfanızın tüm arka plan rengini aqua yapmanızı sağlar.

CSS ile bir renk seçimini, genellikle aşağıdakiler şekillerden biri ile belirlenir.

  • geçerli bir renk adı – “red” gibi
  • bir Hex değeri – “# ff0000” gibi
  • bir RGB değeri – “rgb (255,0,0)” gibi

CSS ile Renkler üzerine daha fazla bilgi almak için CSS Renkler başlıklı konuda inceleme yapabilirsiniz.

Örnek ;

Yukarıdaki örnekte HTML belgesi içinde bulunan <h1> <div> <p> öğelerinin arkaplan renkleri farklı renk gösterim şekilleri kullanılarak tanımlanmıştır.

2-background-image

background-image özelliği bir HTML öğesinin arka plan resmini tayin etmenizi sağlar. Varsayılan olarak, resim tüm elemanı kapsayacak şekilde tekrarlanır.

Bir sayfanın arka plan resmi aşağıdaki şekilde ayarlayabilirsiniz.

Not :   “resim.jpg” dosyası, sayfa ile aynı dizinde olduğu varsayılarak url() yolu yazılmıştır.

Örnek;

Sayfa tasarımlarında arka plan resmi kullanmak her zaman iyi bir bikir olmayabilir. Bir arka plan resmi kullanırken, metni rahatsız etmeyen bir görüntü kullanmanız tavsiye edilir.

3-background-repeat : repeat-x , repeat-y ,no-repeat

background-image özelliği ile tanımladığınız arka plan resmi resmin büyüklüğü ile orantılı olarak yatayda ve dikeyde tekrarlanarak tüm zemini dolduracaktır. Ancak tekrarlama sürecini sadece yatay (repeat-x), sadece dikey(repeat-y) veya tekrarsız(no-repeat) bir şekilde yapılmasını isteyebilirsiniz.

repeat-x kullanımına dair bir örnek;

repeat-y kullanımına dair bir örnek;

no-repeat kullanımına dair bir örnek;

 

background-position

Arka plan resmini sayfanızın belirli bir konumuna veya merkezine yerleştirebilirsiniz. Bunun için background-position özelliğine konumlandırmak istediğiniz yeri belirtmeniz yeterli olacaktır.

background-position özelliğinin alabileceği değerler;

Örnek;

Yukarıdaki örneğimizde arka plan resmi sağ-üst köşeye yerleşmesi sağlanmıştır.

background-attachment

Sayfa içeriğiniz ne kadar uzun olursa olsun arka plan resmini sabitlemek istiyorsanız background-attachment özelliğine, sayfanın geri kalanıyla birlikte kaydırma yapmayacağınızı belirtmek için fixed değeri ile birlikte kullanabilirsiniz.

background

Kodu kısaltmak için, tek bir bildirimde tüm arka plan özelliklerini belirtmek de mümkündür. Buna, kısaltılmış bildirim denir.

background özelliği kısaltılmış bir bildirim özelliğidir. Kısaltmayı kullanırken sıralamanız şöyle olmalıdır.

Özellik değerlerinden birinin eksik olduğu durumda, diğerleri bu sırada olduğu sürece herhangi bir sorun oluşturmaz.

Örnek

background-size

CSS3 ile birlikte gelen background-size özelliği arka plan görüntülerinin boyutunu belirlemenizi sağlar. CSS3’ten önce, bir arka plan resminin boyutu, resmin gerçek boyutuydu. Bir arka plan resmini tam ekran yapabilmek için farklı tekniklerden faydalanıyorduk. Ancak CSS3, arka plan görüntülerini farklı bağlamlarda yeniden kullanmamızı sağlıyor.

Boyutlar, uzunluklar, yüzdeler veya iki anahtar kelimeden birini kullanarak belirtilebilir: içerme veya kapak.

Örnek;

Aşağıdaki örnek, bir arka plan resmini orijinal resminkinden çok daha küçük boyuta getirir (pikselleri kullanarak):

Örnek;

Tam ekran arka plan resmi yapabilirsiniz. Bunun için background-size özelliğine “cover” değeri atamanız yeterlidir.

 

Hakkında Recep ORTAKÖYLÜ

İlginizi Çekebilir

CSS Grid: Web Sayfası Şabolunu Oluşturma

CSS Grid Layout, CSS içinde bulunan en güçlü yerleşim düzenidir.  Tek boyutlu flexbox’ın aksine hem …

Bir Cevap Yazın

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