Gövde Arka Plan Resimleri Kolayca Yapılır

html

Pek çok sitede bulacağınız güzel bir özellik, merkez içerik alanının sayfanın arkasında bir gölge ile örtüştüğü yerdir. Aslında, blogunuzun tek bir arka plan resmiyle güzel (veya başka bir web sitesi) görünmesini sağlamak için oldukça basit bir yöntemdir.

Nasıl oldu?

  1. İçeriğinizin ne kadar geniş olduğunu bulun. Örnek: 750 piksel.
  2. İllüstrasyon uygulamanızda (Illustrator kullanıyorum) içerik alanından daha geniş bir görüntü oluşturun. Örnek: 800px.
  3. Resmin arka planını, blogun her iki tarafında olmasını istediğiniz arka plana ayarlayın.
  4. Arka planın üzerine beyaz bir bölge ekleyin.
  5. Bölgenin her iki tarafından da çıkan beyaz bölgeye bir gölge uygulayın.
  6. Kırpma alanının genişliğini 1 piksel yüksekliğinde ayarlayın. Bu, görüntünün hızlı işleme için hoş ve kompakt bir şekilde indirilmesini sağlayacaktır.
  7. Görüntüyü çıkarın.

Illustrator kullanarak bunu şu şekilde oluşturdum (ekin alanımın çok daha uzun olduğuna dikkat edin… bu sadece ne yaptığımı görebilmeniz için):
Illustrator ile arka plan

İşte çıktının arka plan resmiyle nasıl görüneceğine dair bir örnek:
Arka Plan Resmi Örneği

Vücut stili etiketinizi kullanarak görseli nasıl uygulayacağınız aşağıda açıklanmıştır. CSS dosyası.

arkaplan: # B2B2B2 url ('images / bg.gif') tekrar-y merkezi;

Arka plan stili etiketinin bir incelemesi:

  • # B2B2B2 - sayfanın genel arka plan rengini ayarlar. Bu örnekte, arka plan resmindeki griyle eşleşecek şekilde gridir.
  • url ('images / bg.gif') - kullanmak istediğiniz arka plan resmini ayarlar.
  • tekrar-y - görüntüyü y ekseninde yinelenecek şekilde ayarlar. Böylece arka plan görüntüsü sayfanın üstünden altına doğru tekrarlanacaktır.
  • merkez - görüntüyü sayfanın ortasına ayarlar.

Güzel ve kolay… tek resim, tek stil etiketi!

2 Yorumlar

  1. 1
  2. 2

Ne düşünüyorsunuz?

Bu site spam'i azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl işlendiğini öğrenin.