En Güncel Haberler İçin Hemen Abone Ol
sasdsad
sponsor reklam
Etiketler

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-repeatarka 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-positionarka 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-sizearka 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-originarka 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-cliparka 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.

Dikkat! Suç teşkil edecek, yasadışı, tehditkar, rahatsız edici, hakaret ve küfür içeren, aşağılayıcı, küçük düşürücü, kaba, pornografik, ahlaka aykırı, kişilik haklarına zarar verici ya da benzeri niteliklerde içeriklerden doğan her türlü mali, hukuki, cezai, idari sorumluluk içeriği gönderen Üye/Üyeler’e aittir.

Anasayfa » CSS Dersleri » Background Nedir? Background Anlatımı?

Background Nedir? Background Anlatımı?

kategori - tarih 02:30 - yorum yok
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-repeatarka 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-positionarka 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-sizearka 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-originarka 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-cliparka 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.
Etiketler:

Yorum Gönder

Sponsor : Yeşilçay Design
Copyright © 2016. Yeşilçay Design - Tüm Hakları Saklıdır.
Blog News Template Yeşilçay Design Tarafından Yapılmıştır.
powered by Blogger