Nasıl Yapılır - Tam Sayfa Resmi
CSS ile tam sayfa arka plan görüntüsünün nasıl oluşturulacağını öğrenin.
Tam Sayfa Resmi
Tüm tarayıcı penceresini kaplayan bir arka plan görüntüsünün nasıl oluşturulacağını öğrenin. Aşağıdaki örnek, tam ekran (ve yarım ekran) duyarlı arka plan görüntüsünü gösterir:
Demo - Tam sayfa arka plan resmi
Demo - Yarım sayfa arka plan resmi
Tam Yükseklikte Görüntü Nasıl Oluşturulur
Bir kapsayıcı öğesi kullanın ve kapsayıcıya ile bir arka plan görüntüsü ekleyin height: 100%
.
İpucu: Yarım sayfa arka plan resmi oluşturmak için %50'yi kullanın. Ardından, görüntüyü mükemmel bir şekilde ortalamak ve ölçeklemek için aşağıdaki arka plan özelliklerini kullanın:
Not: Resmin tüm ekranı kapladığından emin olmak için, height: 100%
hem <html> hem de <body> öğelerine başvurmanız gerekir:
Örnek
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Yarım sayfa arka plan resmi:
Örnek
.bg {
height: 50%;
}