CSS ile Arkaplan Resmi Nasıl Yapılır?

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

Çevrimdışı D®agon

  • Ezberletmez Öğretir
  • *******
  • Join Date: Mar 2008
  • Yer: Ankara
  • 11655
  • +524/-0
  • Cinsiyet: Bay
    • Arif Hocam
CSS ile Arkaplan Resmi Nasıl Yapılır?
« : 19 Ocak 2015, 13:27:37 »
Bazen sitelerimizin öğelerinin arkaplanına desen vermek isteriz. “Table”‘lara bunu yapmak kolaydı. WYSIWYG düzenleyicileri kolaylıkla bunu yapmamızı sağlıyorlardı. Peki ya sitemizin tamamına desen vermek istersek ne yapacağız? Css ile çok basit bir kod kullanarak bunun üstesinden gelebiliriz.

Örnek kod aşağıdaki gibidir
   
Kod: You are not allowed to view links. Register or Login
body {
background-image: url(resimler/arkaplan.jpg);
background-repeat: repeat;
background-attachment: scroll;
background-color: white;
background-position: top-left;
}

Bu kullandığımız kod sitemizi < body > seçicisine yukarıda belirttiğimiz özellikleri kazandırır. Gelin biraz da özelliklerden bahsedelim.

background-image:
Örnekte gördüğünüz gibi arkaplan resmi olarak “resimler” klasöründeki “arkaplan.jpg” resmini seçtiğimizi bu özellikle belirtiyoruz.

background-repeat:
Bu özellik ile arkaplan resmimizin tekrar edip etmeyeceğini, eğer edecekse x’mi yoksa y ekseninde mi edeceğini belirtiriz. Alabileceği değerler:

    repeat – Hem yan olarak hem de alta doğru tekrar et
    repeat-x – yana doğru tekrar et
    repeat-y – aşağı doğru tekrar et
    no-repeat – tekrar etme

background-attachment:
Arkaplan sayfa ile birlikte kaysın mı yoksa sabit mi kalsın ayarını bu seçenek ile yaparız. Bunun değerleri:

    scroll – sayfa ile kayar
    fixed – sabittir

background-color:
Arkaplan resminin altında kalan alanın rengini, yani arkaplanın rengini belirlediğimiz özelliktir.

background-position:
Arkaplan deseninin başlayacağı yeri belirtir. Alabileceği değerler:

    top left – üst sol
    top center – üst orta
    top right – üst sağ
    center left – orta sol
    center center – ekranın ortası (hem üstten hem yandan)
    center right – orta sağ
    bottom left – alt sol
    bottom center – alt orta
    bottom right – alt sağ
    x-% y-% – yüzde olarak sağ/sol ve üst/alt
    x-pos y-pos – x,y koordinatlarına göre