Css

CSS Temel – CSS Arka Plan (Background)

  Css    3 Mart 2019
Yorum Yok

Bu bölüm, çeşitli HTML öğeleri’nin CSS ile arka planını nasıl ayarlayacağımızı öğreneceğiz. CSS arka plan özellikleri, elemanların arka plan stillerini tanımlamak için kullanılır.

CSS gibi bir elementin arkaplanını stil için çeşitli özelliklerini sağlar: background-colorbackground-imagebackground-repeatbackground-attachmentve background-position. Aşağıdaki bölüm, bu özellikleri arka planlar için farklı stilleri birer birer ayarlamak için nasıl kullanacağınızı örneklerle göreceğiz.

Arka Plan Rengi (background-color)

background-color Nitelik bir elemanın arka plan rengini ayarlamak için kullanılır.

Aşağıdaki örnek, bir web sayfasının arka plan renginin nasıl ayarlanacağını gösterir.

CSS’deki renkler en çok aşağıdaki yöntemlerle belirtilir:

  • HEX değeri – “# ff0000” gibi
  • “rgb (255,0,0)” gibi bir RGB değeri
  • Bir renk ismi – “red” gibi

Arka Plan Görüntüsü (background-image)

background-image Mülkiyet, bir HTML öğesinin arka plan olarak bir resim ayarlayın.

Bir sayfa için arka plan görüntüsünün nasıl ayarlanacağını gösteren aşağıdaki örneğe bakın.

Arkaplan Tekrarı (background-repeat)

background-repeat Özellik kullanarak , bir arka plan görüntüsünün bir html öğesinin arka planında nasıl döşeneceğini kontrol edebilirsiniz. Arka plan görüntüsünü dikey olarak (y ekseni), yatay olarak (x ekseni), her iki yönde veya her iki yönde tekrarlayabilirsiniz.

Dilimlenmiş görüntüyü yatay olarak tekrarlayarak bir web sayfasının arka planını nasıl ayarlayacağınızı gösteren aşağıdaki örneğe bakın.

Arka Plan Eki (background-attachment)

background-attachment Özelliği arka plan görüntü görünüm ya da ihtiva eden blok ile birlikte kayar ve ilgili olarak sabit olup olmadığını belirler.

Arkaplan Konumu (background-position)

background-position arka plan görüntüsü konumunu kontrol etmek için kullanılır.

İpucu: Varsayılan olarak, bir öğenin sol üst köşesine bir arka plan resmi yerleştirilir ve hem dikey hem de yatay olarak tekrarlanır.

Aşağıdaki örnekte, arka plan görüntüsü sağ üst köşeye yerleştirilmiş ve görüntünün konumu background-positionözellik tarafından belirtilmiştir .

Arka Plan Kısayol Özelliği (background)

Yukarıdaki örneklerden görebileceğiniz gibi, arka planlar ile ilgilenirken dikkate alınması gereken birçok özellik vardır. Tüm bu özellikleri, kodu kısaltmak için tek bir özellikte belirtmek de mümkündür. Buna kestirme özellik denir.

background özelliğini kullanırken, özellik değerlerinin sırası aşağıdaki örnek gibi olmalıdır.

0 okunma

Etiketler : , , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.