Categories: Personal comments:

Tasarımlarda yüksek çözünürlükte arka plan resmi uygulama

Web 2.0 teknolojisinin hemen ardı sıra eglen Web 3.0 ile bir çok göreceli kavram değişiyor. Artık tasarımlarda ortada bir dikdörtgen arka planda tek bir renk devri kapanalı epey bir zaman oldu, web site şablonları tasarımına başlanırken yüksek çözünürlükler ve kaliteli renkler kullanılır oldu. Örneğin; “A” sitesinde arka plan resmi olarak 2200px genişliğinde 700px yüksekliğinde bir görsel kullanabiliryorsunuz,peki bu görsel ekran çözünürlüğüne göre nasıl sayfayı taşmayacak ve istediğimiz yerde duracak?

Arkaplan resminiz 2.000px genişliğinde ve 450px yüksekliğinde varsayalım, <body> tag başlanğıcından hemen sonra

[html]<div id="butun"> </div>[/html]

div’ini açıp kapatıyoruz. Açtığımız bu div için CSS değerlerini aşağıda verdim, siz resim yüksekliğine göre height ve min-height değerlerini düzenleyerek sitenize farklı bir görsellik katabilirsiniz. Unutmadan resim çok geniş nasıl olacak genişlik vermeden demeyin CSS de yapılan tanımlamaların resim genişliğini nasıl hiçe sayıp resmi sayfaya uydurduğunu göreceksiniz.

Demo olarak : www.sahinperde.com adresini ziyaret edebilirsiniz, header kısmı bu mantıkla yapılmıştır.

[html]#butun {
background-image:url(bg.jpg);
background-position:center top;
background-repeat:no-repeat;
margin: 0 auto;
padding:0px;
height:450px;
min-height:450px;
}
[/html]