Background nedir? Background anlatımı?

Background: arka plan - zemin anlamına gelmektedir. 
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;

• 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;

Alabileceğ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

Kod:

background: #fff url('telays.gif') no-repeat fixed center;

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 ;

• 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:padding-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-clip:padding-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.

kaynak