Arka Plan Olarak Resim Ekleme Kodları ve Detaylı Anlatımı

width: 100%; (resmin genişliğini belirtir.)

height: 200px; (resmin yüksekliğini belirtir.)

background-size: cover; (resmi belirtilen alana boydan tam yerleştirip, eninden kırpar.)

background-size: contain; (resmi belirtilen alana enden tam yerleştirip, boyundan kırpar.)

background-position: center center; (resmi belirtilen alanın merkezine resmin merkezinden başlayarak ekler.)

background-position: center right; (resmi belirtilen alanının sağ köşesine ortalayarak yerleştirir taşan kısımları kırpar.)

background-position: center left; (resmi belirtilen alanının sol köşesine ortalayarak yerleştirir taşan kısımları kırpar.)

background-position: top left; (resmi belirtilen alanının sol üst köşesinden başlayarak yerleştirir, taşan kısımları kırpar.)

background-position: top right; (resmi belirtilen alanının sağ üst köşesinden başlayarak yerleştirir, taşan kısımları kırpar.)

background-position: top center; (resmi belirtilen alanının üst kenarına ortalayarak yerleştirir, taşan kısımları kırpar.)

background-position: bottom left; (resmi belirtilen alanının sol alt köşesinden başlayarak yerleştirir, taşan kısımları kırpar.)

background-position: bottom right; (resmi belirtilen alanının sağ alt köşesinden başlayarak yerleştirir, taşan kısımları kırpar.)

background-position: bottom center; (resmi belirtilen alanının alt kenarına ortalayarak yerleştirir, taşan kısımları kırpar.)

background-repeat: no-repeat; (koymak istediğiniz resmin ve belirttiğiniz alanın boyutlarıyla ilgilidir, eğer koymak istediğiniz alanın boyutu resminizin boyutundan büyük ise, bu kod resminizin alana tekrar tekrar koyulmasını enegeller. Bu kodu yazmadığınız taktirde makina varsayılan olarak resminizi -resmin boyutu alanın boyutundan küçük ise- tekrar tekrar koyacaktır. )

.makaleResim {
width: 100%;
height: 185px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

Yukarıda belirttiğim bütün kodlar "<style>" içine yazılmalıdır. Aşağıdaki örnek kod ise "<div>" içine yazılır ve resminizi arka plan olarak eklemenizi sağlar.

<div class="makaleResim" style="background-image: url(@(makalem.MakaleKucukResim));"></div>