Merhaba,

Bu yazımızda Css ile arkaplan değişikliklerini derinlemesine işleyeceğiz.

Background-color;

Yazı rengi dersimizden hatırlarsınız renk tanımlamasında kullandığımız 3 tanımlama tipi vardı. Hex, RGB, Renk Adı aynı yapı burası içinde geçerlidir. Eğer arka plan rengine müdahale etmek istiyorsak herzaman olduğu gibi yine müdahale etmek istediğimiz elementi belirtip onun için kısa bir kod yazımı yapacağız.

Örn;

Bu yaptığımız işlem ile html sayfamızın body elementinin arka plan rengini değiştirmiş olduk. Bunu ;

Background-color : rgb(255,255,255); olarakda yapabileceğimiz gibi

Background-color : black; şeklinde de yapabilirdik.

Artık arkaplan rengimizi değiştirmeyi biliyoruz. Şimdide arka planımıza bir adet resim ekleyelim.

Background-image;

Tabi resmi sadece eklemek olmak bunu hizalamakta gerekli. Bunun içinde position özelliğini kullanacağız.

Böylelikle bir resim ekledik ve resmimizi x düzleminde ortaya y düzleminde en üste olacak şekilde ayarladık.

Arka planımıza bir resimde ekleyebiliyoruz artık. Burada dikkat etmeniz gereken bir elementin arka planına resim ekliyor isek yazı rengini eklediğimiz resmin hakim renkleri ile aynı renkte seçmemek yoksa yazılarımı okunmayacaktır. Ayrıca hoş günümüzde internet hızları gayet iyi ancak arka plan için seçtiğimiz resmin boyutununda büyük olması sayfa açılış hızını düşüreceğinden SEO açısından buda olumsuz bir faktör olacaktır. (Bunuda seo kısmında detaylıca işleyeceğiz)

Background-repeat;

Günümüzde bir çok sayfanın arka planında gradient bir yapı görebilirsiniz (Bir renkten başka bir renge doğru geçişli bir yapı) ve bu sayfalar arka plan resimleri olmasına rağmen hızlı bir şekilde açılmaktadır. Muhtemelen bu sayfalarda repeat adı verilen yapı kullanılmakta ve gradient yapıya sahip düşük boyutlu bir resim dosyası sayfa açılırken kendini bu komut sayesinde tekrarlamakta hem sayfanın açılış hızını düşürmemekte hemde görselliğe olumlu katkıda bulunmaktadır.

Kullanımı ;

X / Y düzlemini biliyoruzdur. Repeat- komutunun yanındaki x resmin hangi düzlemde tekrarlanacağını belirtmektedir Ben resmi dik olarak değil enine tekrarlattım. Bunu aynı şekilde repeat-y komutunu kullanarak dik olarak da tekrarlatabilirsiniz.

Eklediğimiz arka plan rengi için birde boyutlandırma özelliğimizi inceleyelim;

Background-size;

Son olarak da background olarak ekleyeceğimiz resmin nasıl arka planda sabit kalacağınız aşağı yukarı hareket etmeden duracağına bakalım.

Background-attachment;

İyi Günler Dilerim,