Arka planlar

Her CSS kutusunun arkasında arka plan katmanı adı verilen özel bir katman bulunur. CSS, birden fazla arka plana izin vermek de dahil olmak üzere CSS'de anlamlı değişiklikler yapmanın çeşitli yollarını sunar.

Arka plan katmanları kullanıcıdan en uzaktadır ve padding-box bölgesinden başlayarak bir kutunun içeriğinin arkasında oluşturulur. Bu sayede arka plan katmanı, kenarlıklarla hiç örtüşmez.

Arka plan rengi

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Arka plan katmanına uygulayabileceğiniz en basit efektlerden biri rengi ayarlamaktır. background-color değerinin ilk değeri transparent'dur. Bu değer, üst öğenin içeriğinin görünür olmasına olanak tanır. Arka plan katmanında ayarlanan geçerli bir renk, söz konusu öğeye boyanan diğer öğelerin arkasında yer alır.

Arka plan resimleri

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

background-color katmanının üzerine background-image mülkünü kullanarak arka plan resmi ekleyebilirsiniz. background-image aşağıdakileri kabul eder:

  • url CSS işlevini kullanan bir resim URL'si veya veri URI.
  • Renk geçişi CSS işlevi tarafından dinamik olarak oluşturulan bir resim.

url CSS işleviyle arka plan resmi ayarlama

CSS gradyan arka planları

İki veya daha fazla renk geçtiğinde arka plan resmi oluşturmanıza olanak tanıyan çeşitli gradient CSS işlevleri vardır.

Hangi gradyan işlevinin kullanıldığına bakılmaksızın, ortaya çıkan resim mevcut alan miktarına uyacak şekilde doğal olarak boyutlandırılır.

Gradyan işlevlerini kullanarak arka plan resmi uygulama örneğini gösteren demo:

Tekrarlanan arka plan resimleri

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Arka plan resimleri varsayılan olarak arka plan katmanının tüm alanını doldurmak için yatay ve dikey olarak tekrarlanır.

background-repeat mülkünü aşağıdaki değerlerden biriyle kullanarak bunu değiştirin:

  • repeat: Resim, mevcut alanda tekrarlanır ve gerektiğinde kırpılır.
  • round: Resim, mevcut alana mümkün olduğunca çok sayıda örnek sığdırmak için yatay ve dikey olarak tekrarlanır. Kullanılabilir alan arttıkça resim uzar ve orijinal genişliğinin yarısına kadar uzatıldıktan sonra daha fazla resim örneği eklemek için sıkıştırılır.
  • space: Resim, mevcut alana kırpmadan sığacak şekilde yatay ve dikey olarak tekrarlanır. Resim örnekleri gerektiği şekilde aralıklarla yerleştirilir. Tekrarlanan resimler, arka plan katmanının kapladığı alanın kenarlarına değecek şekilde yerleştirilir ve aralarında eşit olarak dağıtılmış beyaz alan bulunur.

background-repeat mülkü, x ve y eksenlerinin davranışını bağımsız olarak ayarlamanıza olanak tanır. İlk parametre yatay tekrar davranışını, ikinci parametre ise dikey tekrar davranışını belirler.

Tek bir değer kullanırsanız bu değer hem yatay hem de dikey tekrarlara uygulanır.

Kısaltmalarda, amacınızı daha net ifade etmenizi sağlayacak tek kelimelik seçenekler de bulunur.

repeat-x değeri, bir resmi yalnızca yatay olarak tekrarlar ve repeat no-repeat ile aynıdır.

Aşağıdaki demoda, background-repeat mülkünün bu özellikleri gösterilmektedir:

Arka plan konumu

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Web'deki bazı resimlerin background-repeat: no-repeat beyanı ile biçimlendirildiğini ve bu tür resimlerin kapsayıcılarının sol üst kısmında gösterildiğini fark etmiş olabilirsiniz.

Arka plan resimlerinin ilk konumu sol üsttür. background-position mülkü, resim konumunu kaydırarak bu davranışı değiştirmenize olanak tanır.

background-repeat ile olduğu gibi background-position özelliği de varsayılan olarak iki değerle resimleri x ve y ekseninde bağımsız olarak konumlandırmanıza olanak tanır.

CSS uzunlukları ve yüzdeleri kullanıldığında ilk parametre yatay eksene, ikinci parametre ise dikey eksene karşılık gelir.

Anahtar kelimeler yalnızca kullanıldığında anahtar kelimelerin sırası önemli değildir:

Yapılması gerekenler
background-position: left 50%;
Yapılması gerekenler
background-position: top left;
Yapılması gerekenler
background-position: left top;

Sıralama, farklı konum eksenleriyle ilişkili anahtar kelimeler için önemli değildir.

Yapılmaması gerekenler:
  background-position: 50% left;

CSS değerleri anahtar kelimelerle birlikte kullanıldığında sıra önemlidir. İlk değer yatay ekseni, ikinci değer ise dikey ekseni temsil eder.

Yapılmaması gerekenler:
  background-position: left right;

Aynı eksenle ilişkili anahtar kelimeleri aynı anda kullanamazsınız.

background-position mülkünün tek değerli kısaltması da vardır. Atlanan değer 50% olarak çözülür. background-position mülkünün kabul ettiği anahtar kelimeleri kullanarak bunu gösteren bir örnek aşağıda verilmiştir:

background-position mülkü, varsayılan iki parametre biçimine ve bir parametre biçimine ek olarak en fazla dört parametreyi de kabul eder;

Üç veya dört parametre kullanıldığında, tarayıcının ofsetin CSS kutusunun hangi kenarından başlaması gerektiğini hesaplayabilmesi için CSS uzunluğunun veya yüzdenin önünde top, left, right veya bottom anahtar kelimelerinden biri bulunmalıdır.

Üç parametre kullanıldığında, CSS uzunluğu veya değeri ikinci ya da üçüncü parametre olabilir. Diğer ikisi anahtar kelimedir. Başarılı olan anahtar kelime, CSS uzunluğunun veya değerinin ofset olduğu kenar belirlemek için kullanılır. Belirtilen diğer anahtar kelimenin ofseti 0 olarak ayarlanır.

Yapılması gerekenler
background-position: bottom 88% right;
Yapılması gerekenler
background-position: right bottom 88%;
Yapılmaması gerekenler:
background-position: 88% bottom right;
Üç veya daha fazla parametre kullanıldığında CSS uzunluğu değerinin önünde top, right, bottom veya left anahtar kelimeleri bulunmalıdır.
Yapılması gerekenler
background-position: bottom 88% right 33%;
Yapılması gerekenler
background-position: right 33% bottom 88%;
Yapılmaması gerekenler:
background-position: 88% 33% bottom left;
Üç veya daha fazla parametre kullanıldığında CSS uzunluğu değerinin önünde top, right, bottom veya left anahtar kelimeleri bulunmalıdır.

background-position: top left 20%, CSS arka plan resmine uygulanırsa resim kutunun üst kısmına yerleştirilir. 20% değeri, kutunun solundan (x ekseninde) %20 ofset olduğunu gösterir.

background-position: top 20% left bir CSS arka plan resmine uygulanırsa% 20 değeri, CSS kutusunun üst kısmından (y ekseninde) %20 ofseti temsil eder ve resim kutunun soluna yerleştirilir.

Dört parametre kullanıldığında, iki anahtar kelime, belirtilen her anahtar kelimenin köklerine göre bir ofset'e karşılık gelen iki değerle eşleştirilir. background-position: bottom 20% right 30%, background-image öğesine uygulanırsa background-image, CSS kutusunun alt kısmından% 20 ve sağ kısmından% 30 mesafeye konumlandırılır.

Aşağıdaki demoda bu davranış gösterilmektedir:

CSS ve anahtar kelime değerlerinin bir karışımını kullanarak background-position özelliğini kullanmaya dair daha fazla örnek aşağıda verilmiştir:

Arka Plan Boyutu

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

background-size mülkü, arka plan resimlerinin boyutunu belirler. Arka plan resimleri varsayılan olarak doğal (gerçek) genişliklerine, yüksekliklerine ve en boy oranlarına göre boyutlandırılır.

background-size mülkü, CSS uzunluğu ve yüzde değerlerini ya da belirli anahtar kelimeleri kullanır. Mülk, arka planın genişliğini ve yüksekliğini bağımsız olarak değiştirmenize olanak tanıyan en fazla iki parametre kabul eder.

background-size mülkü aşağıdaki anahtar kelimeleri kabul eder:

  • auto: Bağımsız olarak kullanıldığında arka plan resmi, doğal genişliğine ve yüksekliğine göre boyutlandırılır; auto, genişlik (ilk parametre) veya yükseklik (ikinci parametre) için başka bir CSS değeriyle birlikte kullanıldığında, auto olarak ayarlanan boyut, resmin doğal en boy oranını korumak için gerektiği şekilde boyutlandırılır. Bu, background-size mülkünün varsayılan davranışıdır.
  • cover: Arka plan katmanının tüm alanını kapsar. Bu, resmin ölçeklendirildiği veya kırpıldığı anlamına gelebilir.
  • contain: Resmi, uzatma veya kırpma olmadan alanı dolduracak şekilde boyutlandırır. Sonuç olarak, background-repeat no-repeat olarak ayarlanmazsa resmin tekrarlanmasına neden olacak boşluklar kalabilir.

Son ikisinin başka bir parametre olmadan bağımsız olarak kullanılması amaçlanmıştır.

Aşağıdaki demoda bu anahtar kelimelerin kullanımı gösterilmektedir:

Bu anahtar kelimelerin background-size'e uygulanmasını gösteren demo:

Arka plan eki

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

background-attachment mülkü, katman ekranda göründüğünde arka plan resimlerinin (arka plan katmanının bir parçası olan resimler) sabit konum davranışını değiştirmenize olanak tanır.

scroll, fixed ve local olmak üzere 3 anahtar kelime kabul eder.

background-attachment mülkünün varsayılan davranışı, scroll özelliğinin ilk değeridir. Daha fazla alana ihtiyaç duyulduğunda, resimler CSS kutusunun sınırlarına göre belirlenen arka plan katmanında bu alanla birlikte hareket eder.

fixed değeri kullanıldığında arka plan resimlerinin görüntü alanındaki konumu sabitlenir.

Arka plan katmanında yer alan resimlerin kapladığı alanın ekrandan kaydırılması (veya oluşturulması) gerektiğinde, arka plan katmanındaki resimler, katmanın tamamı görüntü alanı tarafından ekrandan kaydırılana kadar arka plan katmanının etkinleştirdiği orijinal konumda sabit kalır.

local anahtar kelimesi, arka plan resimlerinin konumunun öğenin içeriğine göre sabitlenmesini sağlar. Arka plan resimleri artık CSS kutusunun sınırları içinde ve dışında oluşturulan alanda (genellikle kaydırma, 2D veya 3D dönüşümler nedeniyle) kapladıkları alanda hareket eder.

Arka planın kaynağı

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Source

background-origin mülkü, belirli bir kutuyla ilişkili arka planların alanını değiştirmenize olanak tanır. Özelliğin kabul ettiği değerler , bir kutunun border-box, padding-box ve content-box bölgelerine karşılık gelir .

Aşağıdaki demoyu kullanarak bu seçenekleri deneyin:

Arka plan klibi

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

background-clip mülkü, background-origin mülkü tarafından oluşturulan sınırlardan bağımsız olarak arka plan katmanından görsel olarak nelerin görüleceğini kontrol eder.

background-origin gibi, CSS arka plan katmanının oluşturulabileceği yerlere karşılık gelen border-box, padding-box ve content-box bölgeleri belirtilebilir. Bu anahtar kelimeler kullanıldığında, belirtilen bölgeden daha uzaktaki arka planın oluşturulması kırpılır veya kırpılır.

background-clip mülkü, arka planı içerik kutusunun içindeki metinden daha fazla kesecek şekilde kırpan bir text anahtar kelimesini de kabul eder. Bu efektin, CSS kutusunun içindeki asıl metinde belirgin olması için metnin kısmen veya tamamen şeffaf olması gerekir.

Nispeten yeni bir mülktür. Bu makalenin yazıldığı sırada Chrome ve çoğu tarayıcı bu mülkün kullanılması için -webkit- ön ekini gerektiriyordu.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Birden fazla arka plan

Modülün başında da belirtildiği gibi, arka plan katmanı birden fazla alt katmanın tanımlanmasına olanak tanır. Özetlemek amacıyla bu alt katmanlara arka planlar diyeceğiz.

Birden fazla arka plan yukarıdan aşağıya doğru tanımlanır. İlk arka plan kullanıcıya en yakın, son arka plan ise kullanıcıdan en uzak arka plandır.

Tanımlanmış tek arka plan veya son katman, tarayıcı tarafından son arka plan katmanı olarak belirlenir. Yalnızca bu katmanın background-color atamasına izin verilir.

Aşağıdaki kod snippet'inde ve canlı demoda gösterildiği gibi, virgülle ayrılmış arka planla ilgili çoğu CSS özelliği kullanılarak birden fazla katman ayrı ayrı yapılandırılabilir.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

Arka plan kısaltması

Bir kutunun arka plan katmanına stil uygulamayı kolaylaştırmak için (özellikle birden fazla arka plan katmanı istendiğinde) aşağıdaki kalıbı izleyen bir kısaltma vardır:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

Birden fazla arka planı kısaltılmış biçimde belirtirken sıra önemlidir. Hem konum hem de boyut değerleri, eğik çizgiyle (/) ayrılmış şekilde sağlanmalıdır. Kaynağı ve klip davranışını doğru sırada belirtmek, her ikisi için de geçerli olan anahtar kelimeleri ayarlama avantajından yararlanmanıza olanak tanır.

Aşağıdaki beyan, arka planı kırpıp içerik kutusundan alır:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Bu kısaltma semantikleri göz önünde bulundurularak, kod snippet'inin arka planla ilgili önceki bildirimleri aşağıdaki şekilde yeniden yazılabilir:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Öğrendiklerinizi test etme

CSS arka planları hakkındaki bilginizi test edin

Arka plan resimleri, CSS kutusunun sol üst tarafına yerleştirilir.

Yanlış
Doğru

Arka plan resimleri varsayılan olarak tekrarlanır.

Doğru
Yanlış

Aşağıdaki background-position beyanlarından hangisi geçerlidir?

background-position: 50% left
background-position: left
background-position: top right 33%
background-position: right bottom

Bir arka plan resmini, kullandığınız bir görüntü alanında sabitlenecek şekilde ayarlamak için:

background-attachment: fixed
background-attachment: scroll
background-position: fixed
background-fixed-to-viewport: true

CSS kutusunda bir arka planın varsayılan background-origin değeri şunlardır:

border-box
padding-box
margin-box
content-box