Herhangi bir boyuttaki bir resmi CSS ile tam ekran bir HTML öğesinin arka planı olarak nasıl ayarlayacağınızı göstereceğiz.
Örnek İçerik Oluşturma
Örnek bir tane container öğesi oluşturup içerik ve arkaplanımızı bunun içine vereceğiz. İsterseniz body etiketini de kullanabilirsiniz.
|
1 2 3 4 5 |
<div class="container"> </div> |
Adım 1: HTML ve body seçicilerine birkaç CSS özelliği ekleyin. Kenar boşluğunu 0’a ayarlamak, tarayıcı penceresinin etrafındaki boşluklardan kurtulacak ve yüksekliği %100’e ayarlayacaktır. Ayrıca bütün HTML öğelerinin box-sizing özelliğini border-box olarak ayarlardık. box-sizing özelliği genişlik ve yükseklik değerini padding ve border değelerine nasıl ekleneceğini gösterir.
|
1 2 3 4 5 6 7 8 9 10 |
*{ box-sizing: border-box; } html, body { margin: 0; height: 100%; } |
Adım 2: .container seçicisine üç özellik ekleyin.
|
1 2 3 4 5 6 7 |
.container { width: 100%; height: 100%; border: 5px solid red; } |
Genişliği açıkça %100 olarak ayarladım, ancak bunu yapmak zorunda değiliz çünkü div blok düzeyinde bir öğedir ve varsayılan genişliği ana genişliğine, bu durumda gövdeye uzatılır.
Ardından, .container yüksekliğini tarayıcı görünüm alanının alt kenarına kadar uzatacak olan height:100% değerini ayarlayın.
İlginizi çekebilir: CSS Uygulama Örnekleri
Yüksekliği işe almak için, yukarıdaki HTML ve gövde seçiciye height:100% değerini eklediğinizden emin olun, aksi takdirde çalışmaz.
Bu .container görmek için 5 piksel genişliğinde, düz stilde ve kırmızı renkte kenarlık ekleyin.
Bu şekilde, bu kapsayıcıya arka plan resmi olarak bir resim eklersem, tam ekranda görüneceğini biliyorum.
Arka Plan Resmi Tam Ekran Ekle
Arka plan resmini .container’a ekleyelim.
Bunun için tek yapmam gereken, normalde proje klasörünüzün veya herhangi bir web resmi URL’sinin resim konumu olacak olan resim URL yolu ile arka plan resmi CSS özelliğini .container eklemektir.
|
1 2 3 4 5 6 7 8 |
.container { background-image: url("https://picsum.photos/800/600"); width: 100%; height: 100%; border: 5px solid red; } |
background-image özelliğinin değeri, kelime URL’si ve ardından parantez içinde tek veya çift tırnak içinde resim URL yolu olmalıdır.
Arka Plan Resmi Boyutunu Ayarla
Bekle… henüz işimiz bitmedi!
Gördüğünüz gibi, görüntü boyutu .container’ın genişliğinden daha büyük olduğu için görüntü kesiliyor. background-size özelliğini kullanarak düzeltebilirim. Cover ve Contain olmak üzere iki ana değere sahiptir.
Cover, görüntünün yüksekliğini ekran yüksekliğine sığdırmaya ve genişliğini orantılı olarak uzatmaya çalışacaktır.
|
1 2 3 4 5 6 7 8 9 10 |
.container { background-image: url("https://picsum.photos/800/600"); background-size:cover; width: 100%; height: 100%; border: 5px solid red; } |
Contain, görüntünün genişliğini ekran genişliğine sığdırmaya ve yüksekliği orantılı olarak uzatmaya çalışacaktır.
|
1 2 3 4 5 6 7 8 9 10 |
.container { background-image: url("https://picsum.photos/800/600"); background-size:contain; width: 100%; height: 100%; border: 5px solid red; } |
Gördüğünüz gibi, seçtiğim görüntünün genişliği yükseklikten daha geniştir, bu nedenle arka plan boyutu değeri olarak contain kullandığınızda, görüntü genişliği tarayıcı genişliğine uyacak şekilde uzatılır ancak yükseklik kısadır ve görebilirsiniz. aynı görüntü, varsayılan davranış olan ikinci kez tekrarlanıyor.
Bunu düzeltelim.
Altta tekrarlanan görüntülerden kurtulmak için .container background-repeat: no-repeat CSS özelliğini kullanın.
|
1 2 3 4 5 6 7 8 9 10 11 |
.container { background-image: url("https://picsum.photos/800/600"); background-size:contain; background-repeat:no-repeat; width: 100%; height: 100%; border: 5px solid red; } |
Daha önce de belirttiğim gibi, seçtiğim görüntü yüksekten daha geniş, bu durumda, ekranı görüntüyle güzel bir şekilde doldurmak için background-size:cover kullandık.
|
1 2 3 4 5 6 7 8 9 10 11 |
.container { background-image: url("https://picsum.photos/800/600"); background-size:cover; background-repeat:no-repeat; width: 100%; height: 100%; border: 5px solid red; } |
Orta Arka Plan Resmi
Bu iyi ama ya görüntünün varsayılan yerine belirli bir bölümünü göstermek istersem?
Pekala… bunu arka plan konumu özelliğini kullanarak kolayca yapabiliriz.
İlginizi çekebilir: HTML – CSS ile Yazıyı ve Resmi Yatay ve Dikey Ortalama
Ağacı görüş alanına ortalamak istediğimi varsayalım. Bunu yapmak için tek yapmam gereken, .container içindeki background-position özelliğine değer olarak center center eklemek.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.container { background-image: url("https://picsum.photos/800/600"); background-size:cover; background-repeat:no-repeat; background-position:center center; width: 100%; height: 100%; border: 5px solid red; } |
Alternatif olarak, görüntünün sol üst tarafını göstermek istiyorsanız, bunu tahmin ettiniz… arka plan konumunun değeri sol üstte olacak ve bu böyle devam edecek!
İşte aldın!
Kullanılan Tüm HTML kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarımkodlama</title> <style> *{ box-sizing: border-box; } html, body { margin: 0; height: 100%; } .container { background-image: url("https://picsum.photos/800/600"); background-size:cover; background-repeat:no-repeat; background-position:center center; width: 100%; height: 100%; border: 5px solid red; } </style> </head> <body> <div class="container"> </div> </body> </html> |
sağ olasın muhteşem anlatım