Arkaplan Resimlerini HTML Validasyonundan Geçirme

Bilindiği üzere arkaplan resmi olarak çağırdığımız resimler HTML validasyonundan geçmemekte ve alt etkiketi gibi önemli etiketler kullanılamamaktadır. Her ne kadar kullanacağımız resimleri arkaplan resmi olarak çağırmak, kullanıcı tarafında kesme -biçmeyi engelleyerek büyük kolaylık sağlasa da, sabit yükseklik değeri alma zorunluluğundan dolayı developer'ın üzerine yük bindirmekte ve her media query için ayrı ayrı yükseklik yazdırmak zorunda bırakmaktadır.

Zira, artı ve eksileri bir yana dursun, ikisini birlikte kullanmak şu mantık ile daha basittir:

Bildiğiniz üzere, Bootstrap kendi içerisinde img-responsive adında bir sınıf barındırmakta, bu sınıf ise resimlerimizi bulunduğu konteyner kadar genişlik verdirerek aynı zamanda da yüksekliğini otomatik olarak hesaplatmaktadır. Bu tutorial, Bootstrap'ın bu özelliğini baz almaktadır.

Yapacağımız sistemin mantığı, resmi çağırmak ama boyutlarını kaybetmeden görünmez hale getirmek, ardından da dışına bir konteyner oluşturarak, otomatik olarak resim kadar boyutlanan konteynere arka plan resmi atamaktır.

HTML
<span class="around-bg" style="background-image: url(santorini.jpg)">
<img src="santorini.jpg" class="img-responsive responsive-bg" alt="Santorini Gün Batımı" />
</span>

CSS
.responsive-bg {
opacity: 0;
}

.around-bg {
display: block;
background-size: cover;
}

Bu şekilde dış kısımdaki span boyutlarını resimden, resim ise bootstrap'ın sütunundan alır. Dolayısıyla hem resim etiketini ve alt özelliklerini kullanarak validasyonu tamamlamış, hem de kullanıcıya daha stabil bir deneyim sunmuş oluruz.

Resimde de görüldüğü gibi çeşitli boyutlara göre tepki göstermektedir. Dilerseniz, jQuery kullanarak iş yükünüzü biraz daha azaltabilir ve responsive-bg sınıfını gördüğünüz her resim için dışına arkaplan alanını otomatik olarak oluşturabilirsiniz.

jQuery
$(document).ready(function () {
$(".responsive-bg").load(function () {
$(this).wrap(function () {
return '<span class="around-bg" style="background-image: url(' + $(this).attr('src') + ');"></span>';
});
});
});