CSS Background-Zemin Özellikleri

13.04.2017

CSS - Zemin(BACKGROUND) Özellikleri

Kutu Modeli

Zemin(Bacground) yukaridaki resimde padding alani ve içerik alanini(paragraf) kapsar.

Zemin özellikleri ile elementlere tek bir renk atanabildigi gibi background-image özelligi ile (X)HTML’in çok üzerinde eklemelerde yapilabilir.

Zemin özelliklerini tek tek incelersek:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

background-color

Elementlerin zeminine bir renk atamak için kullanilir.

Yapisi : background-color: (deger) Aldigi Degerler : (renk) | transparent Baslangiç degeri: transparentUygulanabilen elementler: tüm elementler Kalitsallik: Yok

Örnek:

p {
  background-color: #ddd;
}

CSS’in devamli gelistirilmekte olmasinin avantajlari ve dezavantajlari var. Dezavantajlara flex özelliginin 3 kere degismesini gösterebiliriz. Avantajlari çok tabi. Bunlardan bir tanesine örnek bu makalenin konusudur. Artalan resimlerinin konumlandirmasinda bazi sorunlar vardi. Bu sorunlari görerek mevcut tanim gelistirildi.

Daha önce anlattigimiz artalan tanimina arti özellikler eklendi.

div {
    background-position: 20px 30px;
}

 

yukaridaki örnekte yaptigimiz gibi sabit hizalama tanimi yaptigimizda her zaman elemanin sol ve üst kösesine göre mesafe belirtebiliyorduk. Tam iste burada yenilik geldi. Gerçi yenilik geleli bayagi zaman oluyor. Ben bu yaziyi daha önce yazmak istemistim ama zamanim olmamisti. Simdiye nasipmis.

Yeni gelen özellikten sonra artik sag ve alttan belli mesafede artalan resmi hizalayabiliyoruz. Hemen bir örnek yapalim.

div {
    background-position: right 20px bottom 80px;
}

 

Gayet kullanisli bir özellik. Zamaninda çok aramisligim vardi. Eskiden çözüm için genelde Photoshop’ta resime sagdan ve alttan belirttigimiz mesafeyi verip saydam olarak kaydederdik.

Tarayici destegi konusunda da gayet güzel bir noktada.

background-size özelligi background-image ile tanimlanan resmin boyutlarini tanimlamamiza yarar.

Yapisi : background-size: [<bg-size>[, <bg-size> ]
Aldigi Degerler : [ <yuzde_deger> | <uzunluk> | auto ] | contain | cover
Baslangiç degeri: auto
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

 

cover: Resmin genislik veya yükseklik degerinden en küçük olanina göre kapsayici elemanin ardalanini tamamen kaplar. Ardalan resmi tüm kapsayici elemanin zeminini kaplayacak sekilde ayarlanir ve resmin kalan kismi kesik görünür.

contain: Ardalan resminin genislik veya yüksekliginden en büyük olanina göre ardalan alanin içine uydurur. Resmi herhangi bir yerini kesmeden tamamini gösterir, ancak bazi bölgeler ardalan resmi olmadan görünür.

Yukaridaki grafikte görüldügü gibi gerçek resmin genisligi büyük, yüksekligi küçüktür. contain tanimlandiginda genislik ve yükseklikten büyük olani yani burada genisligin uzunlugu kapsayici genisligine sigincaya kadar orantili sekilde küçültülerek atanmis. Kapsayici elemanin üst ve at kismi bos kaldi.  

cover tanimlandiginda genislik ve yükseklikten küçük olani yani burada yüksekligin uzunlugu kapsayici genisligine sigincaya kadar orantili sekilde büyütülerek atanmis. Ardalan resminin sag ve soldan tasan kisimlari kesik görünecektir.

gif, jpeg ve png gibi resim formatlari yeniden boyutlandirildiginda pek hos görüntüler ortaya çikmiyor. Vektörel resimler(svg) destegi ile daha güzel görüntüler elde edecegiz. Negatif degerlere izin vermemektedir. background-size:0 degeri resmin görünmemesini saglar.

CSS3 diger özelliklerinde oldugu gibi background-size özelligini destekleyen farkli tarayicilar kendi öneklerini kullanmaktadir.

.deneme {
	background-image: url(bg-image.png);
	-moz-background-size: 100% 100%;           /* Firefox 3.6 */
	-o-background-size: 100% 100%;           /* Opera 9.5 */
	-webkit-background-size: 100% 100%;           /* Safari 3.0, Chrome */
	background-size: 100% 100%;           /* w3c, Firefox 4.0, ie9  */
}

kaynak:http://fatihhayrioglu.com



Adınız Soyadınız
İçerik
Son Eklenenler Konular
  • E-Ticaret çalismasi Satis sitesi
  • 2017-2018 Normal Ögretim Konu Anlatim Listesi
  • Asp Net- Veritabani Olusturma ve GridView Ekleme Kayit
  • Asp Net-Master page ile admin paneli
  • Vize 2 Mesleki Yabanci Dil 1
  • Vize 2 için Ag temelleri
  • Vize2 Internet Programciligi I
  • Vize 2 için ödev listesi- Programlamanin Temelleri
  • Programlamanin Temelleri Akis Diyagramlari Örnekleri
  • Bilgisayar Aglari-Ag Temelleri
  • Bilgisayar Mesleki Yabanci Dil Dersi Için Kelimeler 1
  • 2015-2016 Staj Kabul Listesi
  • 2016-2017 Yaz Staji Yapacaklarin Listesi
  • ASP NET ile veritabanindaki alani gösterirken kisaltarak görüntüleme
  • ASP NET - Plesk ile veritabani olusturma ve MS SQL veritabani olusturma islemleri
  • Dreamveaver
  • ASP Net
  • CSS
  • Html
  • Visual Studio C# ve C Console
  • Programlamanin Temelleri-Algoritma
  • Mesleki Yabancı Dil
  • Windows Server 2012
  • Ag Temelleri-Bilgisayar Aglari
  • Staj
  • Copyright (c) Ferdi DOĞAN