background-size Özelliği

background-size özelliği, arka plan görselinin boyutunu belirler. Özelliğin değeri herhangi bir boyut birimi, ya da auto, cover veya contain anahtar kelimeleri olabilir.

Sözdizimi

seçici {
	background-size: değer;
}

Anahtar Kelimeler

Değer	Açıklama
`auto`	Arka plan, görselin gerçek boyutunda olacaktır. Eğer `auto` sadece bir kenar için belirtilmişse, o kenarda arka plan, oranları bozulmadan ölçeklenecektir.
`cover`	Görseli, oranları koruyarak tüm bloğu kaplayacak şekilde ölçekler. Görsel tamamen sığmaya çalışacaktır, ancak bu her zaman mümkün olmayacağından görselin bir kısmı kesilebilir. Blok her zaman görsel tarafından tamamen kaplanacaktır.
`contain`	Görseli, oranları koruyarak bloğun tamamen içine sığacak şekilde ölçekler. Bu durumda görsel tüm genişliği ya da tüm yüksekliği kaplayabilir (görselin ve elementin boyutlarının oranına bağlıdır). Blok genellikle görsel tarafından tamamen kaplanmayacaktır (ancak görsel her zaman tamamen görünecektir, küçültülmüş olsa bile).

Varsayılan değer: auto.

Kullanım

Boyut birimleri ve auto çeşitli kombinasyonlarda kullanılabilir, örneğin: auto 20px, 30% 20px, veya auto 30% gibi. Bu durumda ilk parametre arka planın genişliğini, ikinci parametre ise arka planın yüksekliğini belirler. Eğer bir parametre belirtilirse, bu parametre arka planın hem genişliğini hem de yüksekliğini aynı anda belirler.

Örnek

Şu anda arka plan görseli kendi doğal boyutunda olacak:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 550px;
	height: 400px;
}

Örnek

Şu anda arka plan görseli 300px genişliğinde ve 400px yüksekliğinde olacak (bizim durumumuzda görselin oranları bozulacak):

<div id="elem"></div>

#elem {
	background-size: 300px 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Örnek

Şu anda arka plan görseli 400px genişliğinde ve 400px yüksekliğinde olacak (bizim durumumuzda görselin oranları bozulacak):

<div id="elem"></div>

#elem {
	background-size: 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Örnek

Şu anda arka plan görseli yatayda 400px olacak, dikeyde ise boyutu oranlar bozulmayacak şekilde ayarlanacak:

<div id="elem"></div>

#elem {
	background-size: 400px auto;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Örnek

Şu anda arka plan görseli dikeyde 400px olacak, yatayda ise boyutu oranlar bozulmayacak şekilde ayarlanacak:

<div id="elem"></div>

#elem {
	background-size: auto 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Örnek . contain Değeri

contain değerinin çalışmasına bir göz atın:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Örnek . cover Değeri

cover değerinin çalışmasına bir göz atın:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Örnek . cover Çalışmasını İyileştirme

cover değerinin çalışması, background-position özelliği kullanılarak görseli ortalanarak iyileştirilebilir (bizim durumumuzda görünür kısımlara atların kafaları değil, popoları gelmeye başlayacaktır):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Ayrıca Bakınız

arka plan için kısaltma özelliği olan background özelliği