Ana içeriğe atla

css ile arkaplan özellikleri

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

Yorumlar

Bu blogdaki popüler yayınlar

CSS üstte sabit duran menü yapımı

Sitenin en üstünde sabir şekilde duran menüler ile birçok site ve blog’da karşılaşıyoruz. Benzer bir menüyü sizde sitenize eklemek istiyorsanız basitçe özel hazırlanan bu örneği de kullanabilirsiniz. HTML Kodu: < html > < head >      < meta charset = "utf-8" >      < title >Yusuf Akdin</ title >      < link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > < body >      < div class = "ust" >          Üst taraftaki sabit menü      </ div >      < div class = "orta" >          Site İçeriği      </ div > </ body > </ html > CSS Kodu: html,body{      margin :  0 ;      padding :...

Css ve Div ile Web Sitesi Yapmak

XHTML Kodumuz: <div id= "site" > <div id= "ust" > üst kısım </div> <div id= "icerik" > içerik </div> <div id= "sol" > sol kısım </div> <div id= "alt" > alt kısım </div> </div> CSS Kodumuz: #site { width : 768px ; margin:0 auto; /* sayfayı ortalama kodu */ } #ust { width : 768px ; } #icerik { float : right ; /* sağ tarafa yaslama kodu */ width : 568px ; } #sol { float : left ; /* sol tarafa yaslama kodu */ width : 200px ; } #alt { width : 768px ; clear : both ; /* bir çeşit float temizleme kodu, bu kod ile alt kısım alt tarafta kalacak*/ }

Normalize.Css Nedir? Nerede Kullanılır? Ne işe Yarar?

Normalize.css ile bütün tarayıcıları ayarlarını normalleştirerek yazdığımız kodların anormal bir şekilde her tarayıcıda farklı bir görünüm ve anlayış göstermemesini sağlar. Normalize.css'in yenilikçi bir yapıt olmasının en iyi örneği HTML5 uyumlu bir durumda ve mobil site anlayışında bile etkileyici bir uyumluluk söz konusu. Hoşunuza gitmeye başladı öyle değil mi? Haklısınız çünkü Normalize.css'i  Twitter Boostrap ,  CSS Tricks ,  GitHub ,  SoundCloud  gibi yapıtlar da kullanıyor. Normalize.css'i indirmek için : https://necolas.github.io/normalize.css linkine tıklayıp download butonu yardımıyla Normalize.css'in en güncel sürümüne ulaşabilie ve indirebilirsiniz. Normalize.css'i projemde nasıl kullanabilirim? : Aşağıdaki kodu yardımıyla kolayca projenizde kullanabilirsiniz. <link href="normalize.css" rel="stylesheet">