Bir Web Sayfasına Sığdırmak için Arka Plan Görüntüsünü Nasıl Uzatma

Web sitenizin görsel ilgisini arka plan grafikleriyle verin

Görüntüler, çekici web sitesi tasarımlarının önemli bir parçasıdır. Bu arka plan görüntüleri kullanımını içerir. Bunlar, içerik sayfalarının bir parçası olarak sunulan görüntülerin aksine bir sayfanın arkasındaki alanların kullanıldığı görseller ve grafiklerdir. Bu arka plan görüntüleri, bir sayfaya görsel ilgi ekleyebilir ve bir sayfada aradığınız görsel tasarımı gerçekleştirmenize yardımcı olabilir.

Arka plan görüntüleri ile çalışmaya başlarsanız, şüphesiz, bir görüntünün sayfaya sığacak şekilde genişletilmesini istediğiniz senaryoya girersiniz.

Bu, çok çeşitli cihazlara ve ekran boyutlarına teslim edilen duyarlı web siteleri için özellikle geçerlidir.

Bir arka plan resmini genişletme isteği, web tasarımcıları için çok yaygın bir istektir çünkü her görüntü bir web sitesinin alanına sığmaz. Sabit bir boyut ayarlamak yerine, görüntüyü germek , tarayıcı penceresinin ne kadar geniş veya dar olursa olsun sayfaya sığdırılmasını sağlar.

Bir görüntünün bir sayfanın arka planına sığması için en iyi yol, arka plan boyutu için CSS3 özelliğini kullanmaktır. Burada, bir sayfanın gövdesi için arka plan resmi kullanan ve boyutu% 100'e ayarlayan, böylece her zaman ekrana sığacak şekilde genişleyen bir örnek verilmiştir.

vücut {
arkaplan: url (bgimage.jpg) no-repeat;
arka plan boyutu:% 100;
}

Caniuse.com'a göre, bu özellik IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ ve tüm büyük mobil tarayıcılarda çalışır. Bu, günümüzün tüm modern tarayıcıları için sizi kapsamaktadır, yani bu özelliği, birisinin ekranında çalışmayacaklarından korkmadan kullanmalısınız.

Eski tarayıcılarda gergin bir arka plan

IE9'dan daha eski tarayıcıları desteklemeniz çok muhtemel değildir, ancak IE8'in bu özelliği desteklemediğinden endişe ettiğinizi varsayalım. Bu durumda, gergin bir arka plan üzerinde sahte olabilirsiniz. Ve Firefox 3.6 (-moz-background-size) ve Opera 10.0 (-o-background-size) için tarayıcı öneklerini kullanabilirsiniz.

Gergin bir arka plan görüntüsünü taklit etmenin en kolay yolu, tüm sayfa boyunca genişletmektir. Sonra fazladan boşluk ile bitmez ya da metninizin gerilmiş bölgeye sığdığından endişelenmeniz gerekir. İşte nasıl yapılacağı:

id = "bg" />

1. Öncelikle, tüm tarayıcıların HTML BODY öğelerinde% 100 yükseklik, 0 kenar boşluk ve 0 dolgu olduğundan emin olun. Aşağıdakileri, HTML belgenizin başına yerleştirin:

2. Arka plan olmak istediğiniz resmi web sayfasının ilk öğesi olarak ekleyin ve ona "bg" kimliğini verin:

3. Arka plan resmini , üstte ve solda sabitlenecek ve% 100 genişliğinde ve% 100 yükseklik olacak şekilde yerleştirin. Bunu stil sayfanıza ekleyin:

   img # bg {
   konum: sabit;
   üst: 0;
   sol: 0;
   genişlik:% 100;
   yükseklik:% 100;
   }

4. Tüm içeriğinizi "içerik" kimliğine sahip bir DIV öğesinin içindeki sayfaya ekleyin. DIV'yi resmin altına ekleyin:

   Buradaki tüm içeriğiniz - başlıklar, paragraflar vb. Dahil.

   Not: Şimdi sayfanıza bakmak ilginç. Resim uzatılmış olarak gösterilmeli, ancak içeriğiniz tamamen eksik. Niye ya? Arka plan resmi yükseklikte% 100 olduğundan ve içerik bölümü belgenin akışındaki görüntüden sonra olduğu için çoğu tarayıcı bunu göstermez.
   
5. İçeriğinizi göreceli olacak şekilde ve 1'in z dizinine sahip olacak şekilde yerleştirin. Bu, standartlara uyumlu tarayıcılarda arka plan resminin üzerine getirilir. Bunu stil sayfanıza ekleyin:

   #content {
   konum: göreli;
   z-endeksi: 1;
   }

1. Ama sen bitmedi. Internet Explorer 6 standartlara uygun değildir ve hala bazı sorunları vardır. CSS'yi her tarayıcıdan gizlemek için birçok yol vardır, ancak IE6'dır, ancak en kolay (ve diğer sorunlara neden olma olasılığı en az) koşullu yorumları kullanmaktır. Stil sayfanızdan sonra aşağıdakileri belgenizin başına koyun:

2. Vurgulanan yorumun içinde, IE 6'yı güzel oynamak için bazı stillerle başka bir stil sayfası ekleyin:

3. IE 7 ve IE 8'de de test ettiğinizden emin olun. Onları desteklemek için yorumları ayarlamanız gerekebilir. Ancak, test ettiğimde çalıştı.

Tamam - bu kuşkusuz WAY overkill. Çok az site IE 7 veya 8'i desteklemeli, çok daha az IE6!

Bu şekilde, bu yaklaşım eski ve sizin için gereksizdir. Tüm tarayıcılarımızın birlikte çok güzel oynaması için ne kadar zor şeylerin olduğuna dair bir merak modeli olarak burada daha fazla bırakıyorum!

Daha küçük bir alan üzerinde gerilmiş bir arka plan görüntüsü aking

Web sayfanızda bir DIV veya başka bir eleman üzerinden gerilmiş bir arka plan görüntüsü için benzer bir teknik kullanabilirsiniz. Bu, mutlak konumlandırmayı kullanmanız veya sayfanızın diğer bölümleri için garip boşluk sorunları olması gerektiğinden biraz daha zorlayıcıdır.

1. Resmi arka plan olarak kullanmak istediğim sayfaya yerleştirin.

2. Stil sayfasında, görüntü için genişlik ve yükseklik ayarlayın. Not, genişlik veya yükseklik yüzdelerini kullanabilirsiniz, ancak yükseklik için uzunluk değerleriyle ayarlamayı daha kolay buluyorum.

   img # bg {
   genişlik: 20em;
   yükseklik: 30em;
   }

3. İçeriğinizi, yukarıda yaptığımız gibi "içerik" kimliğine sahip bir div olarak yerleştirin:

   Tüm içeriğiniz burada

4. İçerik div'inin arka plan resmi ile aynı genişlik ve yükseklikte olmasını sağlayın:

   div # içerik {
   genişlik: 20em;
   yükseklik: 30em;
   }

5. Daha sonra içeriği görüntü ile aynı yüksekliğe yerleştirin. Yani eğer görüntünüz 30em ise üstte bir stiliniz olur: -30em; İçeriğe 1'in bir z-endeksi koymayı unutmayın.

   #content {
   konum: göreli;
   üst: -30em;
   z-endeksi: 1;
   genişlik: 20em;
   yükseklik: 30em;
   }

6. Sonra, yukarıdaki gibi, IE 6 kullanıcıları için -1'in bir z-endeksi ekleyin:

Yine, şimdi geniş tarayıcı desteği sunan arka plan boyutu ile, bu yaklaşım da büyük olasılıkla gereksizdir ve geçmiş bir dönemin ürünü olarak sunulur. Bu yaklaşımı kullanmak isterseniz, bunu olabildiğince çok tarayıcıda test ettiğinizden emin olun.

İçeriğiniz boyut değiştirirse, kapsayıcı ve arka plan resminizin boyutunu değiştirmeniz gerekir. Aksi takdirde garip sonuçlarla sonuçlanırsınız.