Css arkaplan ile ilgili herşey

CSS’de Renk İfadeleri

 /* Koyu kırmızı */
      p { color: #CC0000; }
      /* Yeşilin bir tonu */
      div { color: line; }
      /* Mavi renk */
      code { color: rgb( 0, 0, 255 ); }


background-color: Arkaplan Rengi

Bir elementin arkaplan rengini belirlememizi sağlar.

div { background-color: #EFEFEF; }

background-image: Arkaplan Resmi

Bir element içinde arkaplan resmi kullanmamızı sağlar.

body { background-image: url('resim.jpg'); }

Yukarıdaki gibi url('’) yazılarak arasında resmin adı veya yolu yazılır. Örnekte resmin adı resim.jpg olarak gösterilmiştir.

background-repeat: Arkaplan Tekrarı / Döşeli

Kullandığımız arkaplan resminin tekrar edip etmeyeceğini belirtmemizi sağlar. Dört kullanımı vardır:

no-repeat : Tekrar edilmeyecektir
repeat : Tekrarlanacaktır / döşenecektir
repeat-x : Sadece sağa doğru tekrar edecektir
repeat-y : Sadece aşağı doğru tekrar edecektir
Aşağıdaki kullanım örneğini inceleyelim:

 body {
         background-image: url('resim.jpg');
         background-repeat: no-repeat;
      }

Yukarıdaki css kodu resmin tekrarlanmayacağını tarayıcıya bildirir.

background-attachment: Arkaplan Sabitliği

Bu kod kullandığımız arkaplanın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar. Eğer özellik değerinin sabit kalmasını (yani sayfanın yerine göre değişmemesini) istiyorsak fixed özelliği kullanırız.

body {
         background-image: url('resim.jpg');
         background-attachment: fixed;
      }

background-position: Resmin Nereye Hizalanacağı

Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla onun hizalanma şeklini belirleme şansına sahip oluruz.

 body {
         background-image: url('resim.jpg');
         background-repeat: no-repeat;
         background-position: right top;
      }

Yukarıda yer alan kod arkaplan resminin right (sağ) ve top (üst) tarafa doğru hizalanacağını bildirir.

background: Arkaplan Belirlemenin Kısa Yolu

Yukarıdaki tüm özellikleri tek bir kodda kullanmanız mümkün. Bunun için kullanacağımız kod: background.

 body {
         background: #000000 url('resim.jpg') no-repeat right top;
      }

Yukarıdaki kodda belirtilenler sırasıyla: background-color, background-image, background-repeat ve background-position.

Yorum ekle

Kendi yorumlarınızı eklemek için aşağıdaki formu doldurun

No new comments

  • No comments

Admin area

Admin area