CSS Background Image Kullanımı

CSS (Cascading Style Sheets), bir web sayfasının görünümünü kontrol etmek için kullanılan güçlü bir araçtır. CSS'in en yaygın kullanım alanlarından biri, arka plan resimlerini web sayfalarına eklemektir.

CSS ile bir arka plan resmi eklemek oldukça basittir.

div {
    background-image: url('path/to/your/image.jpg');
}

Belirtilen URL'deki resmi body etiketinin arka planı olarak ayarlar. Ancak, bu sadece başlangıç noktasıdır. Arka plan resimleriyle daha fazlasını yapmak mümkündür.

Arka Plan Tekrarlama

Varsayılan olarak, bir arka plan resmi yatay ve dikey olarak tekrar eder. Bu davranışı değiştirmek için

background-repeat

özelliğini kullanabilirsiniz.

div {
    background-image: url('path/to/your/image.jpg');
    background-repeat: no-repeat;
}

Arka plan resminin tekrarlanmamasını sağlar. İşte diğer

background-repeat

değerleri

```
repeat-x
```
: Resmi yatay olarak tekrarlar.
```
repeat-y
```
: Resmi dikey olarak tekrarlar.
```
repeat
```
: Resmi hem yatay hem de dikey olarak tekrarlar (varsayılan).
```
space
```
: Resimler arasında boşluk bırakır ve boşluğu eşit dağıtır.
```
round
```
: Resmin boyutunu değiştirerek sığdırır ve tekrarlar.

Arka Plan Konumu

Arka plan resmini belirli bir konuma yerleştirmek için

background-position

özelliğini kullanabilirsiniz.

div {
    background-image: url('path/to/your/image.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

Yaygın kullanılan konum değerleri şunlardır

top, bottom, left, right, center
Yüzde veya piksel değerleri, örneğin 50% 50% veya 100px 200px

Arka Plan Boyutu

Arka plan resminin boyutunu ayarlamak için

background-size

özelliğini kullanabilirsiniz

div {
    background-image: url('path/to/your/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

background-size

için yaygın değerler

```
auto
```
: Varsayılan boyut.
```
cover
```
: Resmi, tüm alanı kaplayacak şekilde ölçeklendirir (en boy oranını koruyarak).
```
contain
```
: Resmi, alanın içine sığacak şekilde ölçeklendirir (en boy oranını koruyarak).
Piksel veya yüzde değerleri, örneğin 100px 200px veya 50% 50%.

Birden Fazla Arka Plan Resmi

Birden fazla arka plan resmi kullanmak mümkündür. Resimleri virgülle ayırarak belirtebilirsiniz

div {
    background-image: url('image1.jpg'), url('image2.jpg');
    background-repeat: no-repeat, repeat;
    background-position: left top, right bottom;
    background-size: auto, cover;
}

Her arka plan resmi için ilgili özellikleri aynı sırayla belirtebilirsiniz ve diğer arka plan özellikleri

```
background-attachment
```
: Arka plan resminin kaydırma davranışını kontrol eder. Değerleri scroll (varsayılan) ve fixed'dir.
```
background-clip
```
: Arka planın hangi kutunun içine çizileceğini belirler. Değerleri
```
border-box
```
,
```
padding-box
```
,
```
content-box
```
'dır.
```
background-origin
```
: Arka plan konumlandırma bölgesini belirler. Değerleri
```
border-box
```
,
```
padding-box
```
,
```
content-box
```
'dır.

Tüm Arka Plan Özelliklerini Bir Arada Kullanma

Tüm arka plan özelliklerini tek bir bildirimde birleştirebilirsiniz

div {
    background: url('path/to/your/image.jpg') no-repeat center/cover fixed;
}

Sırasıyla

background-image

background-repeat

background-position

background-size

background-attachment

özelliklerini ayarlar.