CSS Arkaplan Resmi

CSS Arkaplan Resmi : Css içinde Background olarak geçen ve Türkçe isimlendirilmesi Arkaplan olan kod’dur. Web sitelerinde HTML nesnelerin CSS arka plan(background) bölümüne projeye göre resim ekleme isteyebiliriz. Bunun için bir kaç çözüm bulunmaktadır. Biz bu yazımızda sizlere bu yöntemlerden olan Css ile arkaplan fotoğrafı nasıl yüklenir ayrıntılı ve örnekli bir şekilde göstereceğim. Ayrıca Css ile arkaplan(background) fotoğrafı yüklenin avantajları nelerdir? ve HTML nesneleri için arka planları nasıl aktif edebilirsiniz aşağıda sizlere anlatıyor olacağım.

Html etiketlerine Css yardımı ile arkaplan vermek aslında oldukça basittir. Seçeceğiniz arka plan görselini belirli bir klasör altında tutup. Css ile ilgili klasör altından fotoğraf çağırmanız yeterlidir. Mantığı bu şekildedir. Ancak bu işlemi kodlarla nasıl yapacağınızı şimdi size gösteriyorum.

CSS Arkaplan Görseli Ekleme

CSS ile arkaplan resmi nasıl eklenir sorusuna açıklık kavuşturup sizlere basit bir CSS kodu yazacağım ve ardın bu kodun nasıl Html ile birleştireceğim onu göstereceğim. Ardından da arkaplan Css Background kodunun özelliklerini sizlerle paylaşacağım.

Kod CSS:

//Arkaplan Sınıfı
.arkaplan{
   background: url("klasor/fotograf.jpg");

   width:400px;
   height:400px;
}

Kod HTML:

<!-- HTML Etiketi -->
<div class="arkaplan"></div>

Yukarıdaki basit örnekte sadece bir Html Div etiketine arka plan fotoğrafı tanımladım. Aşağıda arka plan(background) özelliklerine tanımlayıp ayrıntılı bir örnek yapacağım.

CSS Arkaplan Özellikleri Nelerdir?

Sizlerle arkaplan özelliklerini öğrenirken aynı zamanda gelişmiş bir Css arka plan örneği yapacağım. Belirlediğim özellikleri tanımlarken neler olduğunu açıklayacağım.

Kod CSS:

// Arkaplan Özellikleri
.arkaplan{
   background-image : url("klasor/resim.jpg");
   background-repeat : no-repeat;
   background-attachment : fixed; // scroll hareketine göre nasıl konumlanacağı.
   background-position : left center;

   width:500px;
   height:500px;
}

Kod HTML:

<!-- Arkaplan Özellikleri -->
<div class="arkaplan"></div>
  • background-image : Arkaplan görselinin dosya yolunu belirlediğimiz alandır.
  • background-repeat : Arkaplan resminin konumlandırıldığı bölgeden tekrarlanıp tekrarlanmayacağını veya hangi yöne doğru tekrarlandığının girildiği alandır.
  • background-position : Eklenen görselin nasıl konumlandığının belirtilmesi için yazılır.

Belirlenecek olan arka plan görsellerinde Html etiketi olan Div kullanarak fotoğrafın boyutu kadar vermenizi önermekteyim ve diğer çeşitli nesne konumlandırma Css kodları ile fotoğrafı istediğiniz bölgeye taşıyabilirsiniz.

CSS ile Arkaplan Vermenin Avantajları Nelerdir?

Css ile arkaplan fotoğrafı vermenin avantajı,

  • Sayfa kayma yapmaz.
  • Görseller dizinden silindiyse kırık görsel işareti çıkmaz.
  • Görseller silindiyse boş bölge gözükeceğine arka plan rengi devreye girer.

Web tasarım ve Css konuları hakkında sormak istediğiniz tüm soruları aşağıdaki form üzerinden bana iletebilirsiniz. Sizlere en kısa süre içinde cevap vermeye çalışacağım. Hepinize iyi çalışmalar diliyorum.

CSS Arkaplan Resmi
Etiketlendi: