Merhaba,

Varsayılan olarak tüm HTML öğeleri bir dikdörtgen olarak oluşturulur. Bu dikdörtgenin boyutları dinamiktir: o öğenin içeriğine göre değişir. 

CSS Arkaplan Özellikleri (background özelliği)

HTML öğelerinin arkaplanları, öğenin arkasında ne görüneceğini belirlememize yarar. CSS bütün HTML öğelerine arkaplan verme imkanı sunar. Yazının başında her öğeyi bir dikdörtgen olarak düşündüğümüzü söylemiştik. Buna göre dikdörtgenin fonunu ayarladığınızı düşünebilirsiniz. 

Arkaplanlar yalnızca uygulanan öğeye tanımlanır. Ancak HTML öğelerinin çoğu transparan arkaplana sahip olduğu için örnek olarak <body> öğesine uygulayacağımız bir arkaplan tüm öğelerin arkasına işlenecektir.

Arkaplan Rengi (background-color özelliği)

Varsayılan değeri: transparent şeklindedir. Arkaplana bir renk tanımlamamıza yarar.

body{ background: #663399; }

Arkaplan Görseli (background-image özelliği)

Yalnızca bir renk atamak görselliği tamamlamak açısından her zaman yeterli olmayacağı için CSS arkaplanda görsel kullanılmasına da müsde eder.

Bunun için yalnızca görselin bulunduğu konumu belirtmemiz yeterli olacaktır.

body{ background-image: url(images/arkaplan-deseni.jpg); }

Arkaplan görselinin özellikleri (nasıl tekrar edeceği, nasıl konumlanacağı, ölçüsü) farklı arkaplan özellikleri ile belirtilir. background-image özelliği yalnızca kullanılacak görseli tanımlamak için kullanılır.

HTML arkaplan için kullandığınız görselin boyutlarını dikkate almaz. Görsel kullanıldığı alandan daha büyük ölçülere sahip olsa bile alan büyüklüğünü etkilemez veya kullanıldığı alan görselin boyutlarını sığdırmak için bir işlem yapmaz.

HTML Görselleri ile CSS Arkaplan Görselleri Arasındaki Fark Nedir? 

HTML’de kullanılan <img> etiketi içeriğin bir parçasıdır fakat CSS’de kullandığımız background-image özelliği yalnızca dekoratiftir, içeriği etkilemez.

Site logosu, fotoğraf galerisi, ürün görseli gibi öğeler tamamen içerik öğesidir ve <img> etiketi ile kullanılmalıdır.

Yazı arkasında güzel bir manzara resmi, sosyal medya veya menü iconları vb. dekoratif öğeler, kaldırılsa dahi içerikte bir anlam bozulması olmaz. Bu tarz durumlarda CSS kullanmak daha mantıklı olacaktır.

Hangisini kullanacağınızı belirlerken özellikle kullandığınız görselin sayfa içeriği ve bütünlüğü açısından mutlaka olup olmaması gerektiğine karar verin. Eğer olmazsa olmaz bir öğe ise, <img> etiketi ile sayfa içeriğine yerleştirmeniz daha uygun olacaktır.

Renk Geçişleri (gradient özelliği)

CSS renk geçişleri (gradient) yapmaya da olanak sağlar. 

  • linear-gradient : doğrusan gradyan : tek bir yönde ve dikdörtgen şeklinde renk geçişleri için
  • radial-gradient : yarıçapsal gradyan : dairesel şekilde ve her yöne doğru renk geçişleri için

Renk geçişlerini ayrı bir başlıkta da inceliyor olacağız fakat arkaplan renk geçişleri de arkaplan görseli (background-image) olarak kullanıldığını bilmemiz gerekir.

body{ background-image: linear-gradient(white, silver); }

Arkaplan Konumu (background-position özelliği)

Varsayılan olarak, arka plan görseli sayısız defa kendini tekrar edecektir. Kullanmak istediğiniz konumu, yatayda x ve dikeyde y değerlerini belirleyerek konumlandırabilirsiniz.

İki koordinat değeri için de kullanabileceğiniz birimler;

  • Piksel değerinden belirtmek için px
  • HTML öğesinin boyutlarına göre % oran
  • Anahtar kelimeler (center , top , right , bottom , left)
body{ background-position: center 20px; }

Örnekte yatay konumu center ile dikey konumu px ile belirttik. İki konumu da aynı birimden veya farklı birimlerden belirlemek mümkün.

Arkaplan Tekrarlama (background-repeat özelliği)

Varsayılan olarak, arkaplan görseli sınırsız olarak kendini tekrar edecektir. Sadece yatayda tekrar etmesini, sadece dikeyde tekrar etmesini veya hiç tekrar etmemesini isteyebilirsiniz.

body{ background-repeat: repeat-x;} /* Sadece yatay tekrar et */
body{ background-repeat: repeat-y;} /* Sadece dikey tekrar et */
body{ background-repeat: no-repeat;} /* Tekrar etme, arkaplan görselini 1 kere göster */