Web Sayfasında Arkaplan Resminin Ekranı Kaplaması İçin
Web sayfalarımızın arka planına resim yerleştirdiğimizde, ziyaretçilerin çözünürlüklerine göre görünümleri farklı olacaktır. Çünkü kullandığımız resim farklı boyuttaki ekranlarda farklı sayıda tekrarlanarak döşenecektir.
Ziyaretçinin bilgisayarının çözünürlüğü ne olursa olsun arka plan resmimizin ekranı kaplamasını istiyorsak, CSS3 ile gelen background-size özelliğini kullanabiliriz.
Background-size özelliği sayesinde arkaplan resmimizin uzunluğunu px, yüzde vb. cinsinden belirleyebilir, veya cover ve contain değerlerini kullanabiliriz.
Cover ve contain değerleri resmin uygulandığı bölgeyi kaplamasını sağlar. Aralarındaki fark;
-
Cover değeri hem yatay hem de dikeyde boş yer kalmayacak şekilde kaplamasını sağlar
-
Contain değeri ise yatayda veya dikeyde taşma olmayacak şekilde kaplamasını sağlar. Bu durumda iki yönden birinde boşluk kalabilir.
-
Konu örnekleri kısmını inceleyiniz.
Tarayıcıların eski versiyonları için -webkit-, -moz- ve -o- ön eklerini kullanmak gerekmektedir.
body {
background: url('../Images/arkaplan.png') no-repeat fixed center top;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin: 0;
padding: 0;
}
Aşağıdaki örnekte ise arkaplan resminin boyutu piksel cinsinden belirtilmiştir.
#kutu {
background: url(resim.jpg);
background-size: 100px 150px;
background-repeat: no-repeat;
}
css ile arkaplan resmini uzatma, css arkaplan resmi ekranı kaplama, css arka planı tam ekran yapma, arkaplan uzatma,
KONU İLE İLGİLİ ÖRNEKLER
|
CSS3 Arkaplan resminin boyutlarını ayarlama - Cover ve Contain farkı
|
Kendin Dene
|
body {
background: url('../Images/arkaplan.png') no-repeat fixed center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
16309 kez okundu.