CSS çoklu arka plan

Bu bölümde, bir elemana birden fazla arka plan görseli nasıl ekleyeceğinizi öğreneceksiniz.

Ayrıca aşağıdaki özellikleri öğreneceksiniz:

  • background-size
  • background-origin
  • background-clip

CSS çoklu arka plan

CSS ile background-image Özelliği bir elemana çoklu arka plan görselleri eklemek için kullanılır.

Farklı arka plan görselleri virgülle ayrılmış olup, birbirine yığınır ve ilk görsel izleyiciye en yakın olur.

Aşağıdaki örnekte iki adet arka plan görseli vardır, ilk görsel çiçek (taban ve sağda hizalanmıştır), ikinci görsel kağıt arka planı (sol üstte hizalanmıştır):

örnek

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: sağ alt, sol üst;
  background-repeat: yineleme yapmadan, yineleme yaparak;
}

Kendi Kendine Deney

Çoklu arka plan görselleri ayrı bir arka plan özelliği (yukarıda belirtilen gibi) veya background kısa yazım özelliği kullanılmıştır.

Aşağıdaki örnekte background Kısa yazım özellikleri (sonuç yukarıdaki örnekle aynı):

örnek

#example1 {
  background: url(flower.gif) sağ alt yineleme yapmadan, url(paper.gif) sol üst yineleme yaparak;
}

Kendi Kendine Deney

CSS Arka Plan Boyutlandırma

CSS background-size Özelliği, arka plan görselinin boyutunu belirlemenize olanak tanır.

Arka plan görselinin boyutunu belirlemek için uzunluk, yüzdelik veya aşağıdaki iki kelimelerden birini kullanabilirsiniz:içerir veya cover.

Aşağıdaki örnek, arka plan görselinin boyutunu orijinal görselden çok daha küçük olarak ayarlar (piksel kullanılarak):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Bu kod budur:

örnek

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Kendi Kendine Deney

background-size diğer iki olası değeri içerir ve cover.

içerir kelimeleri, arka plan görsellerini mümkün olduğunca büyük boyutta genişletir (ama genişliği ve yüksekliği içerik alanına uymalıdır). Bu durumda, arka plan görseli ve arka plan konum alanı arasındaki oranlara bağlı olarak, bazı arka plan alanları arka plan görseli tarafından kaplanmamış olabilir.

cover kelimeleri, arka plan görsellerini, içerik alanını tamamen kaplayacak şekilde (genişliği ve yüksekliği içerik alanına eşit veya daha büyük olacak şekilde) genişletir. Bu durumda, arka plan görselinin bazı bölümleri arka plan konum alanında görünmez olabilir.

aşağıdaki örnekler içerir ve cover kullanımı:

örnek

#div1 {
  background: url(img_flower.jpg);
  background-size: içerik içine;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Kendi Kendine Deney

Çoklu arka plan görsellerinin boyutlarını tanımlama

Çoklu arka planları işlerken,background-size Özellik, birden fazla arka plan boyutlandırma değeri kabul eder (virgülle ayrılmış liste).

Aşağıdaki örnek, üç tane arka plan görseli belirler, her bir görsel farklı background-size değerlerine sahiptir:

örnek

#example1 {
  background: url(tree.png) sol sol tekret, url(flower.gif) sağ alt tekrar; 
  	url(paper.gif) sol sol tekrar;
  background-size: 50px, 130px, auto;
}

Kendi Kendine Deney

Tam boyutlu arka plan görseli

Şimdi, web sitesindeki arka plan görselinin her zaman tarayıcı penceresinin tamamını kaplamasını istiyoruz.

Aşağıdaki gibi spesifik gereksinimler:

  • Görseli sayfanın tamamıyla doldurur (boşluk yok)
  • Gereksinimlere göre görseli ölçeklendirir
  • Sayfada görseli merkeze yerleştirir
  • Sarmalama çubuğunu tetiklemez

Aşağıdaki örnek, bunu nasıl gerçekleştireceğinizi gösterir: <html> elementini kullanarak (html elementi, her zaman en az tarayıcı penceresinin yüksekliği kadar olur). Daha sonra üzerine sabit ve merkezi bir arka plan ayarlayın. Son olarak, background-size özelliği ile boyutunu ayarlayın:

örnek

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Kendi Kendine Deney

Hero Image

Ayrıca, <div> üzerinde farklı arka plan özelliklerini kullanarak Hero Image (metin içeren büyük görsel) oluşturabilir ve bunu istediğiniz konumda yerleştirebilirsiniz.

örnek

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Kendi Kendine Deney

CSS background-origin Özelliği

CSS background-origin özellik, arka plan görselinin konumunu belirtir.

bu özellik üç farklı değeri kabul eder:

  • border-box - arka plan görseli, kenarlık sol üst köşesinden başlar
  • padding-box - arka plan görseli, iç kenarlıkların sol üst köşesinden başlar (öntanımlı)
  • content-box - arka plan görseli, içeriğin sol üst köşesinden başlar

aşağıdaki örnekler background-origin özellikler:

örnek

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Kendi Kendine Deney

CSS background-clip Özelliği

CSS background-clip özellik, arka planın çizim alanını belirtir.

bu özellik üç farklı değeri kabul eder:

  • border-box - arka plan, kenarlık dışına çizilir (öntanımlı)
  • padding-box - arka plan, iç kenarlıkların dış kenarlarına çizilir
  • content-box - arka plan, içerik çubuğunda çizilir

aşağıdaki örnekler background-clip özellikler:

örnek

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Kendi Kendine Deney

CSS İleri Arka Plan Özellikleri

Özellik Açıklama
background Bir ifade içinde tüm arka plan özelliklerini ayarlamak için kısayol özelliğidir.
background-clip Arka planın çizim alanını belirler.
background-image Bir elemene bir veya daha fazla arka plan görseli atar.
background-origin Arka plan görselinin yerleştirilme konumunu belirler.
background-size Arka plan görselinin boyutunu belirler.