Alessandra
Bayan Üye
Background: arka plan - zemin anlamına gelmektedir.
Arka plan için kullanılan CSS özellikleri ise aşağıda ki gibidir.
background-color
arka plan rengini ayarlamak için.
Kod:
background-color:#fff
Alabileceği değerler;bileceği değerler ;
Default değer olarak 0% 0% ile gelir.
background
arka plan özelliğini kısaltılmışı biraz karmaşık görünsede fazla koddan bizi kurtaracaktır.
Arka plan için kullanılan CSS özellikleri ise aşağıda ki gibidir.
- background-color
- background-image
- background-attachment
- background-repeat
- background-position
background-color
arka plan rengini ayarlamak için.
Kod:
background-color:#fff
Alabileceği değerler;bileceği değerler ;
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottom
- xpos - ypos
- x% - y%
- inherit
Default değer olarak 0% 0% ile gelir.
background
arka plan özelliğini kısaltılmışı biraz karmaşık görünsede fazla koddan bizi kurtaracaktır.
- color : renk kodu
- transparent : transparan görünüm
- inherit : kalıtım alma
Default değer olarak transparent gelir.
background-image
arka plan'a resim dosyası eklemek için kullanılır.
Kod:
background-image:url('gradient2.png');
Alabileceği değerler;
- url : url adresi
- none : arka plan yok
- inherit : kalıtım alma
Default değer olarak none gelir.
background-attachment
arka plan görüntüsünün arkada sabit mi? yoksa scroll ile kayması özelliği.
Kod:
background-attachment:fixed;
Alabileceği değerler;
- fixed : arka plan sabit kalır
- scroll : scroll ile hareket eder
- inherit : kalıtım alma
Fixed değeri arkaplanı sabitler.
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;
Alabileceği değerler;
- 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
Default olarak repeat gelir.
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;
Ala
Kod:
background: #fff url('telays.gif') no-repeat fixed center;
tekrar anlatmama gerek yok sanırım ne işe yaradıklarını.
CSS3 ile yeni katılan özelliklerimiz mevcut onlardanda bahsedelim.
background-size
arka planın yükselik ve genişlik değerini ayarlamamızı sağlayan yeni özellik
background: #fff url('telays.gif') no-repeat fixed center;
tekrar anlatmama gerek yok sanırım ne işe yaradıklarını.
CSS3 ile yeni katılan özelliklerimiz mevcut onlardanda bahsedelim.
- background-size
- background-origin
- background-clip
background-size
arka planın yükselik ve genişlik değerini ayarlamamızı sağlayan yeni özellik
Kod:
background-size:40px 40px;
Alabileceği değerler ;
background-origin
arka planın nerden başlayacağını belirler.
background-size:40px 40px;
Alabileceği değerler ;
- 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.
background-origin
arka planın nerden başlayacağını belirler.
Kod:
background-origin:border-box; background-origin
adding-box; background-origin:content-box;
Alabileceği değerler;
background-clip
arka planı kırpmak için kullanır. Arka planı koyduğumuzda küçültmek yerine kırparak gösterir.
background-origin:border-box; background-origin
adding-box; background-origin:content-box; Alabileceği değerler;
- 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.
background-clip
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-clipadding-box; background-clip:content-box;
Yine alabileceği değerler background-origin ile aynıdır.
background-clip:border-box; background-clip
adding-box; background-clip:content-box; Yine alabileceği değerler background-origin ile aynıdır.
- 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.