ANASAYFA HTML CSS & CSS3 JavaScript ASP.NET

Zemin Özellikleri (Background)

Öğelere zemin (background) rengi vermek veya zemin resmi eklemek ile onların nasıl davranış göstereceğini kapsar. Background, arka plân olarak da adlandırılabilir. Bu özellikler;

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Zemin Rengi “background-color” özelliği ögelerin (etiketlerin) zeminine renk vermek için kullanılır. Renk belirleme işi için “Renk Birimleri” başlığında ele aldığımız yöntemlerden istediğimizi seçebiliriz. Ancak en çok tercih edilen RGB kodu verilerek yapılandır.

Örneğin; h1 {background-color:#3070E7;}

h1 etiketi için zemin rengini #3070E7 yapacaktır.

"background-image” özelliği ögelere zemin resmi eklemek için kullanılır. Örnek olarak “zemin.jpg” isimli görselimizi zemin resmi olarak sayfamıza eklemek için aĢağıdaki stil şablonu kodunu uygulamalıyız.

body { background-image:url( „zemin.jpg‟); }

Zemin Resmi Tekrarı "background-repeat" özelliği zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır. Dört ayrı değer alır:

  •  background-repeat:repeat; (Görselin hem yatay olarak hem de dikey olarak tekrar etmesini istiyorsak bu özelliği kullanırız. Bu özellik yazılmasa bile CSS varsayılan olarak bunu yapacaktır.)
  •  background-repeat:no-repeat; (Eklediğimiz görselin hiçbir Ģekilde tekrar etmesini istemiyorsak bu özelliği kullanırız.)
  •  background-repeat:repeat-x; (Eklediğimiz görsel yatay olarak yani x ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.)
  •  background-repeat:repeat-y; (Eklediğimiz görsel dikey olarak yani y ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.)

Resmi sayfanızın olduğu yere “logo.gif” olarak kaydedip

body {

background-image:url( "logo.gif‟);

background-repeat : repeat;

 }

"background-position" özelliği görselin sayfadaki pozisyonunu belirler. Dikey hizalamada üst (top), orta (center) ve alt (bottom) geçerli bir pozisyonken; yatay hizalamada sol (left), orta (center) ve sağ (right) geçerlidir. Bu özellik için 11 ayrı değer bulunmaktadır.


top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

 

  •  background-position:x% y%; (Görselimize yatay ve dikey olarak yüzde üzerinden pozisyon vermemizi sağlar. İlk yüzde yatayın, ikinci yüzde ise dikeyin pozisyonudur. Örnek: background-position:60% 75%; )
  •  background-position:xpos ypos; (Görselimize yatay ve dikey olarak pixel bakımından pozisyon vermemizi sağlar. İlk pixel'li rakam yatayın, ikinci pixel'li rakam ise dikeyin pozisyonudur. Örnek: background-position:100px 200px; )

Örnek olarak bir önceki örnekte sayfamıza döşediğimiz “logo.gif“ görselini sayfamızın tam ortasına yerleştirelim.

body {

background-image: url(„logo.gif‟);

background-repeat : no-repeat;

background-position: center center ;

}

 

Bu örneğimizi kısaltma uygulayarak şöyle de yazabilirdik;

 

body{

background:url(„logo.gif‟) no-repeat center center;

}

Tarih:15-11-2017 Yazar:Bilecik Bilişim
Anasayfa

SıraDosya Adı Yükleyen Yükleme Tarihi İndir
1 uygulama_dosyaları Bilecik Bilişim15-11-2017 04:58:06




YAZ

Çok güzel olmuş hocam ellerinize,bilginize sağlık
18-12-2017 04:42:12