Oyunlar Teorisine Giriş

Bir HTML ögesine arka plan resmi uygulamak için background-image özelliği kullanılır. Alabileceği değerler şunlardır:

• none: Varsayılan değerdir. Arka plan resmi uygulanmaz.
• resmin-konumu: Arka plan olarak kullanılacak resmin konumunu belirtmek için url() methodu kullanılır. Birden fazla arka plan resmi uygulanabilir. 

Bir HTML ögesine nasıl Arka plan resmi ekleyebileceğinizi gördük. Şimdi arka plan resimlerinin biçimlendirmek için kullanabileceğiniz diğer CSS özelliklerini inceleyelim.

background-repeat

Bir resmin arka plana nasıl döşeneceğini belirlemek için kullanılır. Şu değerleri alır:

• no-repeat: Arka plan resmini tekrar ettirmez.
• repeat-x: Arka plan resmini sadece yatay eksende tekrar ettirir.
• repeat-y: Arka plan resmini sadece dikey eksende tekrar ettirir.
• repeat: Varsayılan değerdir. Arka plan resmini hem yatay hem de dikey eksende tekrar ettirir. 

background-size

Arka plan resminin nasıl boyutlandırılacağını ayarlamak için kullanılır. Şu değerleri alır:

• cover: Resmin en boy oranını korunarak kutu alanını tamamen kaplayacak biçimde ayarlanır. Bu durumda, görüntünün bir kısmının kutunun dışına taşması muhtemeldir.
• contain: Resim kutu alanına sığacak biçimde ayarlanır. Bu durumda, görüntünün en boy oranı kutununkinden farklıysa, görüntünün her yatay veya dikey kenarlarında boşluklar olabilir.
• width: Resmin genişliğini ayarlar. Yükseklik verilen genişliğe göre en boy oranı korunarak boyutlandırılır.
• width height: Resmin genişliğini ve yüksekliğini ayarlar. Bu durumda, resmin en boy oranının bozulmamasına dikkat edilmelidir.

background-positon

Arka plan resminin konumu ayarlamak için kullanılır. Varsayılan olarak resmin konumu sol üst köşe referans alınarak ayarlanır. Söz dizimi şu şekildedir:

/* Anahtar değerler */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* Uzunluk değeri */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
background-position: 25% 75%;

/* Birden fazla arka plan resmini boyutlandırma */
background-position: 0 0, center;

/* Kenarlara göre referans vermek */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global değerler */
background-position: inherit;
background-position: initial;
background-position: unset;