Merhaba Yazılım Blogu okurları … Artık yeni bir karar aldım. Hakim olduğum kodlama dillerini hakkında bilgiler ve tavsiyeler vereceğim. İlk başlangıcımız CSS Background Kodları ile olacaktır.

CSS ile html ile inşa edilen bir websitenin göze daha hoş bir şekilde hitap etmesini sağlanmaktadır. Ama CSS’in fazla kodu yoktur. Zaten CSS, C gibi fazla karışık bir dil değildir. Başladığınızda zaten syntax yapısını hemen anlayabilirsiniz. Bende sizlere yardımcı olabilmek için CSS’e yeni başlayacak arkadaşlara CSS Background (arka plan) kodlarını  vereceğim.

CSS Background Kodları

Background-İmage : Sitenizin arka planının arka plan resmini ayarlar.

• background-image: resim/resim.jpg;

Background-Color  : Sitenizin arka plan rengini ayarlar.

• background-color: #fff;
• background-color:grey:
• background-color: rgb(201, 76, 76)

Background-Size :  Siteniniz arka plan boyutunu ayarlar.

• background-size:500px;

Background-Repeat :  Sitenizin arka planının tekrar etmesini sağlar.

• background-repeat:repeat-x;
• background-repeat:repeat-y;
• background-repeat:repeat;
• background-repeat:norepeat;

Backgorund-Position :  Sitenizin arka plan resminin hangi kısımlarının gözükeceğini belirler.

• background-position:center;
• background-position:center-top;

Background-Attachment :  Arka plan resminizin kaydırılıp kaydırılmayacağına karar verir.  Görüntüsel açıdan göze hoşluk veriyor. Fix ve scroll iki değer vardır. Fix ile sabit kalır. Scroll ile hareket eder.

• background-attachment:fix;
• background-attachment:scroll;

Background-Origin :  Arka planın konumunu hesaplamada kullanılır.

• border-box: arka plan resminin konumu border alanından başlatır.
• padding-box: arka plan resminin konumu padding alanından başlatır.
• content-box: arka plan resminin konumu içerik alanından başlatır.

Background-Blend-Mode : Arka plan resmi ile arka plan renginin harmanlanmasını sağlar. 16 çeşit harmanlama tipi vardır.

.multiply {
  background-blend-mode: multiply;
}

.screen {
  background-blend-mode: screen;
}

.overlay {
  background-blend-mode: overlay;
}

.darken {
  background-blend-mode: darken;
}

.lighten {
  background-blend-mode: lighten;
}
.color-dodge {
  background-blend-mode: color-dodge;
}

.color-burn {
  background-blend-mode: color-burn;
}

.hard-light {
  background-blend-mode: hard-light;
}

.soft-light {
  background-blend-mode: soft-light;
}

.difference {
  background-blend-mode: difference;
}

.exclusion {
  background-blend-mode: exclusion;
}

.hue {
  background-blend-mode: hue;
}

.saturation {
  background-blend-mode: saturation;
}

.color {
  background-blend-mode: color;
}

.luminosity {
  background-blend-mode: luminosity;
}