CSS • HTML

CSS Tam Sayfa Arka Plan Görüntüsü

Kasım 6, 2019
3 Okuma Süresi

Buradaki amaç, her zaman tüm tarayıcı penceresini kapsayan bir web sitesindeki arka plan resmidir. Üzerinde bazı özellikler koyalım:

  • Sayfanın tamamını görüntüyle doldurur, beyaz boşluk olmaz
  • Görüntüyü gerektiği gibi ölçeklendirir
  • Görüntü oranlarını korur (en boy oranı)
  • Resim sayfada ortalanmış
  • Kaydırma çubuklarına neden olmaz
  • Mümkün olduğunca tarayıcılar arası uyumlu

Müthiş, Kolay, İlerici CSS3 Yolu

Şimdi CSS3’teki background-size özelliği sayesinde bunu tamamen CSS üzerinden yapabiliriz. html öğesini kullanacağız (her zaman en azından tarayıcı penceresinin yüksekliğindeki body den daha iyi). Üzerinde sabit ve ortalanmış bir arka plan belirledik, sonra kapak anahtar kelimesine ayarlanmış arka plan boyutunu kullanarak boyutunu ayarladık.

1
2
3
4
5
6
7
8
9
 
html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 

Uyumlu Tarayıcılar:

Safari 3+
Chrome +
IE 9+
Opera 10+ (Opera 9.5 arka plan boyutunu destekledi, ancak anahtar kelimeleri değil)
Firefox 3.6+ (Firefox 4, satıcı olmayan ön ek sürümünü destekler)

Sadece CSS Tekniği # 1

Burada, herhangi bir tarayıcıda yeniden boyutlandırılabilecek bir satır içi <img> öğesi kullanıyoruz. Tarayıcı penceresini dikey olarak doldurmaya devam eden bir min-height ve yatay olarak doldurmaya devam eden %100 bir width belirledik. Ayrıca görüntünün gerçekte olduğundan daha küçük olmayacak şekilde görüntünün genişliğinin en az genişliğini belirledik.

Özellikle zeki bit, tarayıcı penceresinin görüntüden daha küçük olup olmadığını kontrol etmek için bir medya sorgusu kullanmak ve ne olursa olsun ortalanmasını sağlamak için birleşik yüzde-sol ve negatif sol kenar boşluğu kullanmaktır.

İşte CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
img.bg {
  
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
 
  position: fixed;
  top: 0;
  left: 0;
}
 
@media screen and (max-width: 1024px) {
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}
 

Uyumlu Tarayıcılar:

İyi tarayıcıların herhangi bir sürümü: Safari / Chrome / Opera / Firefox
IE 6: Borked – ancak bir tür sabit konumlandırma pimi kullanırsanız muhtemelen sabitlenebilir
IE 7/8: Çoğunlukla çalışır, küçük boyutlarda ortalanmaz ancak ekranı iyi doldurur
IE 9: Çalışır

Sadece CSS Tekniği # 2

Bunu yapmanın oldukça basit bir yolu, sayfaya satır içi bir görüntü koymak, onu sol üst köşeye sabitlemek ve en boy oranını koruyarak en az% 100’lük bir minimum genişlik ve% 100 vermektir.

1
2
3
 
<img src="images/bg.jpg" id="bg" alt="">
 

1
2
3
4
5
6
7
8
9
10
 
#bg {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
}
 

Bununla birlikte, bu görüntüyü ortalamaz ve bu burada oldukça yaygın bir arzu … Yani, görüntüyü bir div içine sararak bunu düzeltebiliriz. Bu div tarayıcı penceresinden iki kat daha büyük yapacağız. Sonra görüntü en boy oranını koruyarak ve görünen tarayıcı penceresini ve bunun ölü merkezini kapatacak şekilde yerleştirilir.

1
2
3
4
5
 
<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
 

 

 

Etiketler

Yorum Yap

Yorum yapmak için tıklayın