Günümüzde duyarlı arka plan görsellerine sahip web siteleri talep görmektedir. Responsive web siteleri kullanıcılara cep telefonları, tabletler veya masaüstü bilgisayarlar da dahil olmak üzere hemen hemen tüm cihazlarda ideal kullanıcı deneyimi sunar. Duyarlı görseller web sitesinin arka planını, ekran boyutunu ve boyutlarını uyarlayabilir. Duyarlı görüntüler kalitenin ve oranın korunmasını sağlar. Ek olarak, duyarlı arka plan resimlerine sahip web sitesi hızlı bir şekilde yüklenir.
Bu kılavuz, arka plan resimlerini ekran boyutlarına uyarlamak için talimatlar sağlayacaktır.
Arka Plan Resimleri Ekran Boyutlarına Nasıl Uyarlanır?
Aşağıda verilen adım adım talimatlar izlenerek görüntü ekran boyutlarına uyum sağlayabilir.
Adım 1: Bir HTML Yapısı Oluşturun
Öncelikle bir HTML yapısı oluşturun ve harici stil sayfasını kullanarak şunu ekleyin:
< HTML >
< KAFA >
< bağlantı bağıl = 'stil sayfası' href = 'stil.css' >
< başlık > Duyarlı Arka Plan Resmi başlık >
KAFA >
< vücut >
-- Diğer içeriğin ekleneceği alan-- >
vücut >
HTML >
2. Adım: CSS'yi uygulayın
Şimdi CSS’yi “ vücut ' bölüm. İlk önce arka plan resmini belirtin. Bu amaçla “ arka plan görüntüsü ”ve“ belirtin url() ” resim dosyası adresini içeren değer.
Bundan sonra “ arka plan görüntüsü ” görüntü boyutunu belirtmek için “ arka plan tekrarı ”Görüntünün tekrarını ayarlamak için özellik ve“ arka plan eki ” görüntünün sayfanın geri kalanıyla birlikte kaydırılıp kaydırılmayacağını ayarlamak için. Son olarak “ marj ' Ve ' dolgu malzemesi ' ile ' 0 ”:
vücut {arka plan resmi: url ( 'test-görüntü.jpg' ) ;
arka plan boyutu: 100 % 100 % ;
/* Görüntüyü şu şekilde ölçeklendir: 100 % genişlik ve 100 % yükseklik */
arka planda tekrarlama: tekrarlama yok;
arka plan eklentisi: sabit;
marj: 0 ;
dolgu malzemesi: 0 ;
/* İsteğe bağlı: Sabit arka plan */
}
Çıktı
Bu, tarayıcı penceresini daraltmadan önceki çıktıdır:
Tarayıcının daralmasından sonra:
Yukarıdaki çıktı, görüntünün arka planı ekran boyutlarına uyarladığını doğrular.
Çözüm
Arka plan resimlerini ekran boyutlarına uyarlamak için öncelikle “ görünüm alanı ” boyutları ve ölçeklendirmeyi kontrol etmek için kafa bölümünde. Daha sonra bir HTML yapısı oluşturun ve CSS'yi uygulayın. CSS'de “ arka plan boyutunda ” özellik değerini “ kapak Bir görüntünün yüksekliğini ve genişliğini ölçeklendirmek için 'değeri. Bu makale, arka plan resimlerini ekran boyutlarına uyarlamak için eksiksiz bir kılavuz sundu.