Arka plan için kullanılan CSS özellikleri ise aşağıda ki gibidir.
- background-color
- background-image
- background-attachment
- background-repeat
- background-position
arka plan rengini ayarlamak için.
Kod:
background-color:#fff;- color : renk kodu
- transparent : transparan görünüm
- inherit : kalıtım alma
background-image
arka plan'a resim dosyası eklemek için kullanılır.
Kod:
background-image:url('gradient2.png');- url : url adresi
- none : arka plan yok
- inherit : kalıtım alma
background-attachment
arka plan görüntüsünün arkada sabit mi? yoksa scroll ile kayması özelliği.
Kod:
background-attachment:fixed;- fixed : arka plan sabit kalır
- scroll : scroll ile hareket eder
- inherit : kalıtım alma
Default değer olarak scroll gelir.
background-repeat
arka plan görüntüsünün tekrar etmesi veyahut etmemesi özelliğidir. Default olarak repeat geldiği için siz no-repeat demediğiniz sürece devam eder.
Kod:
background-repeat:no-repeat;- repeat : sürekli x-y oranında tekrar eder
- repeat-x : sadece x yönüne tekrar eder
- repeat-y : sadece y yönüne tekrar eder
- no-repeat : hiç bir yöne tekrar etmez
- inherit : kalıtım alma
background-position
arka plan görüntüsünün ekranımızın neresinde durmasına karar verdiğimiz özellik.
Kod:
background-position:left top;Kod:
background-position:50% 50%;Kod:
background-position:12px 50px;- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottom
- xpos - ypos
- x% - y%
- inherit
background
arka plan özelliğini kısaltılmışı biraz karmaşık görünsede fazla koddan bizi kurtaracaktır
Kod:
background: #fff url('telays.gif') no-repeat fixed center;- background-size
- background-origin
- background-clip
arka planın yükselik ve genişlik değerini ayarlamamızı sağlayan yeni özellik
Kod:
background-size:40px 40px;
- length : px değer
- percentage : % değer
- cover : içeriği ekrana tam olarak sığdırır.
- contain : içeriğin her yanı görünecek şekilde ekrana sığdırır.
arka planın nerden başlayacağını belirler.
Kod:
background-origin:border-box;
background-origin:padding-box;
background-origin:content-box;
- padding-box : arka plan padding alanından başlar.
- border-box : arka plan border alanından başlar.
- content-box : arka plan içerikten başlar.
arka planı kırpmak için kullanır. Arka planı koyduğumuzda küçültmek yerine kırparak gösterir.
Kod:
background-clip:border-box;
background-clip:padding-box;
background-clip:content-box;
- padding-box : arka plan padding alanından başlar.
- border-box : arka plan border alanından başlar.
- content-box : arka plan içerikten başlar.
Hiç yorum yok :
Yorum Gönder