CSS Background Özelliği – CSS Arkaplan Oluşturmak

CSS background özelliği web projelerinde en fazla kullanılan CSS özelliklerinden biridir. Arka plan içeriği ön plana çıkarmak için önemli ve kullanımı bir o kadar dikkat isteyen bir araçtır.Uygun olmayan bir arka plan seçimi içeriğinizi değersizleştirir.İçerikle uyumsuz bir background içerği görünmez yapabilir, kullanıcıların dikkatini içerikten çok başka taraflara çeker, önemli noktaların göz ardı edilmesine sebep olur.

CSS Background (Arkaplan) Özellikleri

CSS arka plan (background) özellikleri, bir HTML belgesinde elementler için arka plan da değişik efektler oluşturmaya yarar.Örnek olarak bir elementin arka plan rengini değiştirmek ya da arka planına bir resim yerleştirmek için background özellikleri kullanılır.
CSS de tanımlı 5 tane arka plan özelliği bulunmaktadır.
1- background-color
2- background-image
3- background-repeat
4- background-attachment
5- background-position
Şimdi bu özellikleri tek tek açıklayalım.

Background-color | Arkaplana Rengi

Elementlerin arka plan renkleri varsayılan olarak saydamdır.Bir elementin arka planına istediğiniz rengi vermek için background-color özelliği kullanılır.
Örnek Kullanımı:

div {
 background-color: #00de34;
}

Özellik isminden sonra CSS de geçerli renk bildirim yöntemlerin biri kullanabilirsiniz.CSS de renk kullanma yöntemlerini CSS renk kodları yazımda bulabilirsiniz.

Background-image | Arka Plan Resmi

Elementlerin arka planına renk değil de görüntü (resim-imaj-image) oluşturmak istendiği zaman background-image özelliği kullanılır.
Örnek Kullanımı:

div {
 background-image: url('resimyolu');
}

Not: Background-image özelliği varsayılan olarak tekralama özelliğine sahiptir.Yani  element, resmin boyutundan büyük ise, resim otomatik olarak elementi kaplayacak şekilde yatay ve dikeyde kendini tekrarlar.Element içerisinde boş alanları doldurur.

Background-repeat | Arka Plan Görüntü Tekrarlamak

Yukarıda da açıkladığım gibi arkaplan resimleri varsayılan olarak tekrarlama özelliğine sahiptir.Bu özelliği kaldırmak yada sadece dikey veya yatay da tekrarlama vermek için background-repeat özelliği kullanılır.
Örnek Kullanımı:

div {
 background-image: #00de34;
 background-repeat: x-repeat; /*arkaplan resmimizi yatay yönde sürekli tekrarlıyoruz.*/
}

Background-repeat bazı değerler alır.
no-repeat değeri tekrarlama özelliğini kapatmaya yarar.
repeat-x değeri yatayda, repeat-y değeri ise dikey yönde tekrarlama oluşturur.

Background-position | Arka Plan Görüntü Pozisyonunu Ayarlamak

Bir elementin arka planına görüntü eklediğimiz de resim varsayılan olarak elementin sol üst köşesine dayalı olarak başlar.Resmin pozisyonu değiştirmek için background-position özelliği kullanılır.
Örnek Kullanım:

div {
 background-position: right top;
}

Not: Görüntünün pozisyonu belirlemek için yukarıda örnekte yaptığımız gibi top,right,left ,center gibi ingilizce yön isimleri değer olarak kullanılır.İlk değer yatay konum, ikinci değer dikey konumu belirler.
Not: Ayrıca sayısal olarak % değerleri de verilebilir.Mesela yukarıda örnek oluşturduğumuz right top pozisyonu sayısal olarak 0% 0% değerine karışılık gelir.left ve bottom değeri ise 100% 100% değerine karşılık gelir.

Background-attachment – Arka Plan Görüntüsünü Sabitlemek

Arka plan görüntüsünü sayfaya sabitlemek için background-attachment özelliği kullanılır.Normalde eklene arka plan resmi sayfa aşağı yukarı kaydırıldığında hareket etmez.Fakat bu özelliğe fixed değeri verdiğimiz de görüntü sayfaya yapışacak ve sayfa aşağı-yukarı hareket ettiğini de resim de hareket edecektir.
Örnek Kullanımı:

div {
 background-attachment: fixed;
}

Background – Kısaltılmış Özellik

Yukarıda açıkladığımız bütün özellikleri tek bir background özelliği içerisinde tek satır da oluşturabiliriz.
Örnek Kullanım:

div {
 background: #00de34 url('resimyolu') no-repeat right top fixed;
}

Yukarıda öğrendiğiniz gibi CSS background özelliği oldukça kolay kullanımı olan güzel bir özelliktir.Bu dersimizde en çok kullanılan arkaplan özelliklerinde, arkaplan rengi oluşturmak (background-color), arkplana resim vermek (background-image), arkaplan resmini konumlandırma, sabitleme, resimleri tekrarlatma gibi ayarları anlatmaya çalıştım.

Bir sonraki CSS dersleri konularında birinde görüşmek üzere.Aklınıza takılan ve merak ettiğiniz bir şeyler varsa yorum kısmından iletişim kurmayı unutmayın.

Tüm CSS Dersleri için tıklayın

Bunları da beğenebilirsin