CSS'de Arkaplana Renk Nasıl Verilir ? - Hüseyin Körbalta

CSS Dersleri 4: Arkaplan (Background) Özellikleri Merhabalar, CSS derslerimize kaldığımız yerden devam ediyoruz. Daha önce ki dersimiz olan CSS Dersleri 3: Renklerin Kullanımı adlı dersimizde CSS'de renkleri nasıl kullanacağımızı öğrenmiştik. Bu dersimizde ise HTML nesnelerine arkaplan rengi vermek, arkaplan resmi eklemek gibi CSS'in temel yapılarından olan Arkaplan (Background) özelliklerini kullanmayı göstereceğim. Daha önce ki CSS Dersleri: CSS Dersleri 1: CSS Nedir ? CSS Dersleri 2: Söz Dizim Kuralları ve Seçiciler CSS Dersleri 3: Renklerin Kullanımı Gel gelelim asıl konumuz olan Arkaplan (Background) olayına. Arkaplan içeriği ön plana çıkarmak için önemli ve kullanımı bir o kadar dikkat isteyen bir özelliktir.Uygun olmayan bir arkaplan seçimi içeriğinizi değersizleştirir.Yazı varsa yazıları okunmaz eder, kullanıcılarınızın dikkatini içerikten çok başka taraflara çeker, önemli noktaların göz ardı edilmesine sebep olur. CSS Arkaplan (Background) Özellikleri CSS Arkaplan (Background) Özellikleri, bir HTML belgesinde elementler için arkaplan da değişik efektler oluşturmaya yarar.Örnek olarak bir elementin arkaplan rengini değiştirmek ya da arkaplanına bir resim yerleştirmek için background özellikleri kullanılır. CSS de tanımlı 5 tane arka plan özelliği bulunmaktadır. Bunlar; background-color background-image background-repeat background-attachment background-position Verdiğim bu özellikleri tek tek sizlere açıklayacağım. Background-Color (Arkaplana Renk Verme) Özelliği HTML'de oluşturduğunuz herhangi bir elementin arkaplan rengi default olarak saydam olarak gelir. İstediğiniz ya da diğer elementlerden ayırt edilmesini istediğinizi bir html elementine arkaplan rengi verebilirsiniz. Bunun içinde kullanacağımız CSS özelliği background-color: özelliğidir. Ö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 Dersleri 3: Renklerin Kullanımı yazısında bulabilirsiniz. Background-image (Arkaplana Resim Ekleme) Özelliği İstediğiniz bir html elementine arkaplan rengi değilde bir resim eklemek isteyebilirsiniz. Bunun içinde kullanacağınız CSS özelliği background-image: özelliğidir. Örnek Kullanımı: div { background-image: url('resimyolu'); } Not: Background-image özelliği varsayılan olarak tekrarlama ö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 ki boş alanları doldurur. Background-repeat (Arkaplanda Eklenen Resimi Tekrarlama) Özelliği 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: url('resimyolu'); background-repeat: x-repeat; /*arkaplan resmimizi yatay yönde sürekli tekrarlıyoruz.*/ } Background-Repeat özelliği bir takım değerler almaktadır. Örnekte gördüğünüz gibi bir değer almış x-repeat diye. Bu resmi yatay yönde tekrarlamasını sağlıyor. Bunun gibi 3 tane alabileceği değer mevcuttur. Bunlar : no-repeat; Bu değer resmin tekrarlanmamasını sağlar. Yani,tekrarlama özelliğini kapatır. x-repeat; Az önce söylediğim gibi belirtilen resmi yatay yönde olmak üzere atandığı HTML elementinin arkaplanını kaplayacak şekilde resmi tekrarlatır. repeat-y; Bu özellik ise bir üstteki özelliğin aksine dikey olarak resmi tekrarlatır. Background-position (Arkaplan Resminin Pozisyonunu Ayarlama) Özelliği Bir elementin arkaplanı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 2: 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 (Arkaplan Resmini Sabitleme) Özelliği Arkaplan görüntüsünü sayfaya sabitlemek için background-attachment özelliği kullanılır.Normalde eklenen arkaplan 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; } 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; } Bir CSS dersimizin daha sonuna geldik. CSS Arkaplan (Background) Özellikleri içerikli dersimiz de hangi sorularınıza cevap verdik birde ona bakalım. Arkaplana nasıl renk veririz? (background-color) Arkaplana nasıl resim (görüntü-imaj) ekleriz? (background-image) Arkaplan resmini nasıl konumlandırırız? (background-position) Arkaplan resmini nasıl sabitleriz. (background-attachment) Arkaplan resminin tekrarlamasını nasıl sağlarız? (background-repeat) Background özelliği nasıl kullanılır? (background)

CSS Dersleri 4: Arkaplan (Background) Özellikleri

Son Yorumlar

Kategoriler