- Konu sahibi
- #1
Arka plan görselinin ekranı boşluk bırakmadan kaplaması için görseli ekran yüksekliğine ulaşan bir öğeye uygulayın ve
Burada
Mevcut projenizde aynı CSS kurallarını ekranı kaplamasını istediğiniz öğenin seçicisine uygulayabilirsiniz. CSS ayrı bir dosyadaysa
Görselin tamamının görünmesi daha önemliyse
Görsel hiç görünmüyorsa dosya adını, uzantısını ve
background-size: cover kullanın. Görsel oranını koruyarak alanı doldurur; ekranla en-boy oranları farklıysa kenarlarının bir kısmı kırpılabilir.Arka planı uygulayın
- Aşağıdaki örneği bir HTML dosyasına kaydedin. Aynı klasöre
arka-plan.jpgadlı bir görsel koyun veya koddaki dosya adını kendi görselinizin adıyla değiştirin. - Ardından HTML dosyasını tarayıcıda açın.
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Arka plan örneği</title>
<style>
body {
margin: 0;
}
.kapak {
min-height: 100vh;
background-color: #333;
background-image: url("arka-plan.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
}
</style>
</head>
<body>
<main class="kapak">
<h1>Merhaba</h1>
</main>
</body>
</html>Burada
min-height: 100vh, kapak alanının en az görüntü alanı yüksekliğinde olmasını sağlar. İçerik daha uzunsa alan büyüyebilir; bu durumda görsel de büyüyen alanı kaplayacak şekilde ölçeklenir. background-position: center görseli ortalar, background-repeat: no-repeat ise tekrarını engeller. Görsel yüklenemezse belirlenen koyu arka plan rengi görünür.Mevcut projenizde aynı CSS kurallarını ekranı kaplamasını istediğiniz öğenin seçicisine uygulayabilirsiniz. CSS ayrı bir dosyadaysa
url() içindeki göreli yol HTML dosyasına değil, CSS dosyasının konumuna göre değerlendirilir.Görünümü kontrol edin
Sayfayı açtıktan sonra tarayıcı penceresini daraltıp genişletin. Arka plan alanı boşluk bırakmadan dolmalı; farklı ekran oranlarında görselin görünen kısmı değişebilmelidir. Önemli bir bölüm kırpılıyorsabackground-position: center top gibi bir değerle görselin hangi kısmının öne çıkacağını değiştirebilirsiniz.Görselin tamamının görünmesi daha önemliyse
cover yerine contain kullanın. Bu seçenek kırpmayı önler, ancak görselin oranına bağlı olarak alanın bir kısmı boş kalabilir; boşlukta arka plan rengi görünür.Görsel hiç görünmüyorsa dosya adını, uzantısını ve
url() yolunu kontrol edin. Sayfanın geliştirici araçlarındaki ağ kayıtlarında görsel isteğinin başarısız olup olmadığı da görülebilir. Yolu düzelttikten sonra dosyayı kaydedip sayfayı yenileyin.
Moderatör tarafında düzenlendi:
