CSS ARKAPLAN (Background) RESiM ÖZELLİKLERİ

background-image özelliği ve ögelerine istediğimiz zemin resmi eklemek ve konumlandırmak için kullanılırız. Ö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);} 

ÇIKTI:

css zemin

ZEMİN RESMİ TEKRARI


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:

ÖRNEK 1:

body{background-image:url(logo.png); 
     background-repeat : repeat; 
     } 

ÇIKTI:

css zemin

ÖRNEK 2:

body{background-image:url(logo.png); 
     background-repeat :no-repeat; 
     } 

ÇIKTI:

css zemin

ÖRNEK 3:

body{background-image:url(logo.png); 
     background-repeat :repeat-x; 
     } 

ÇIKTI:

css zemin

ÖRNEK 4:

body{background-image:url(logo.png); 
     background-repeat :repeat-y; 
     } 

ÇIKTI:

css zemin

ZEMİN RESMİ POZİSYONU


"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.

Örnek olarak bir ağaç resmini merkez sağa yerleştirelim:

body {width:100%; height:650px;
      background-image: url(agac.jpg); 
      background-repeat : no-repeat; 
      background-position:center right;} 

ÇIKTI:

css zemin

Şimdide ikinci örnek olarak ağaç resmini alt merkeze yerleştirelim:

body {width:100%; height:650px;
      background-image: url(agac.jpg); 
      background-repeat : no-repeat; 
      background-position:bottom center;} 

ÇIKTI:

css zemin

"background" özelliklerini kısaltma uygulayarak şöyle de yazabilirdik:

body{ background:url(logo.gif) no-repeat top center;} 

Birkaç örnek daha yapalım:

 body{ background: url(logo.gif) no-repeat bottom right;}
 
 body{ background: url(logo.gif) no-repeat 60% 75%;}
 
 body{ background: url(logo.gif) no-repeat 100px 200px;} 

background-attachment özelliği


Zemine eklenen resim sayfa ile beraber kaymasını veya sayfanın zeminine sabit kalmasını sağlar.

  1. scroll: Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.

  2. fixed: Sayfa hareket ettirildiğinde zeminin sabit kalmasını sağlar.

Hiçbir Şey yazılmadığında default(Geçerli) değer; scroll'dur

body {background-image: url(logo.gif); 
      background-repeat : no-repeat; 
      background-attachment: fixed } 

Nergiz demirsaplı 14/12/2018

Ben web sitemi kurdum arkaplan rengi eklemeyi unutmuştum simdi ekliyorum olmuyor, sebebi nedir.

yönetici 14/12/2018

Nergiz, css ile background renk ayarlama

body {

  background-color: lightblue;
}
Websitenin, arkaplan görünen yere mouse ile gel sol tıkla öğeyi inceleye tıkla burdan incele bir öğeden miras alıyor olabilir, bazı düzeltmeler yaparak deneyebilirsin. Olmasa html inline tanımla daha geçerli bir tanımlamadır.
<body style="background-color: lightblue;">
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

2182

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.