CSS'de Arka Plan Renklendirme (Background)

CSS'de background özelliği, HTML etiketleri için arka plan efektlerini tanımlamak için kullanılır. 
 

Bilgilendirme!
Arkadaşlar lütfen bu uzun yazılar kafanızı karıştırmasın ve sizi korkutmasın. Başlıkları ve açıklamalarını teker teker okuyun ve kendi tarayıcınızda örnekleri uygulayın, farkları anlmaya çalışın, bol bol pratik yapın.


# background-color : Arka Plan Rengi

CSS'de background-color özelliği ile etiketlerimizin arka plan renklerini belirleyebiliriz.

body {
  background-color: blue;
}

Yukarıda'ki kodda HTML sayfamızın <body> yani gövdesini tamamen mavi yapmasını belirttik.

# opacity : Şeffaflık 

CSS'de opacity özelliği , bir etiketin opaklığını / şeffaflığını belirtir. 0.0 - 1.0 arasında bir değer alır. Opaklık değeri ne kadar düşükse, arka plan rengi o kadar şeffaftır.

div {
  background-color: blue;
  opacity: 0.3;
}

Not : Bir etiket için "opacity" özelliği kullandığımız zaman, o etikete ait tüm alt etiketlerinde arka planları şeffaf olacaktır ve bu durumdan etkilenecektir.

# RGBA Değerlerinde Şeffaflık

RGBA renk değeri şununla belirtilir: rgba (kırmızı, yeşil, mavi, alfa). Alfa parametresi 0,0 (tamamen şeffaf) ile 1,0 (tamamen opak) arasında bir sayıyı belirtir.

div {
  background: rgba(0, 128, 0, 0.2) /* Arka plan rengi yeşil ve %20 oranında şeffalık mevcut  */
}

# background-image : Arka Plan Resmi

CSS background-image özelliği, bir etiketin arka plan resmi eklememizi olanak sağlar.Varsayılan olarak arka plan resmi tüm alanı kaplayacak şekilde tekrarlanır. Background-image özelliğine değer olarak, görselin url adresi yazılır. Url adresi yazılırken url() deyimi kullanılır ve bu deyim içerisine görsel adresi yazılır.

body {
  background-image: url("arkaplan.jpg");
}

# background-repeat : Arka Plan Tekrarı

CSS background-repeat özelliği, görselin arka plandaki tekrar sayısını belirtir. Varsayılan olarak, background-image özelliği bir görüntüyü hem yatay hem de dikey olarak tekrarlar.

  • Bir görselin sadece yatay olarak tekrarlanmasını istiyorsak : background-repeat : repeat-x;
  • Bir görselin sadece dikey olarak tekrarlanmasını istiyorsak : background-repeat : repeat-y;
  • Bir görselin bir sefer kullanılıp tekrarlanmasını istemiyorsak : background-repeat : no-repeat;

özellikleri kullanılır.

CSS background-repeat kullanımı :

p.yatay {
  background-image: url("arkaplan-yatay.png");
  background-repeat: repeat-x;
}

p.dikey{
  background-image: url("arkaplan-dikey.png");
  background-repeat: repeat-y;
}

p {
  background-image: url("arkaplan.png");
  background-repeat: no-repeat;
}

# background-position : Arka Plan Konumu

CSS background-position özelliği , arka plan görselinin konumu belirlemek için kullanılır. 

CSS background-position kullanımı :

body {
  background-image: url("gorsel.png");
  background-repeat: no-repeat;
  background-position: left top;
}

Örnekte görüldüğü üzere, arka plan görseli sol üst köşeye konumlandırılmıştır. Konumlandırma olarak kullanabileceğimiz değeler :

  • left (sol),
  • right (sağ),
  • top (üst),
  • bottom (alt),
  • left top (sol üst)
  • left bottom (sol alt)
  • right top (sağ üst)
  • right bottom (sağ alt)

# background-attachment : Arka Plan Ekleri

CSS "background-attachment" özelliği, arka plan görselinin ekranda kaydırılıp kaydırılmayacağını veya sabitleneceğini belirtir. Bu özelliğin iki değeri vardır  :

  • fixed : görselin ekranda hep sabit kalmasını belirtir.
  • scroll : görselin sayfanın geri kalanıyla birlikte kaydırılması gerektiğini belirtir.

CSS background-attachment kullanımı :

body {
  background-image: url("gorsel.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

# CSS Background Kısa Kullanımı

CSS'de background özelliklerini ayrı ayrı yazmak yerine tek bir satırda yazabiliriz.Bunun için sadece "background" özelliğini kullanmak yeterlidir. Bu özelliğin değerlerine sırasıyla :

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

şeklinde tanımlanabilir.

body {
  background-color: #ffffff;
  background-image: url("gorsel.png");
  background-repeat: no-repeat;
  background-position: left top;
}

Bu örnekteki background özelliklerini tek bir satırda yazabiliriz :

body {
  background: #ffffff url("gorsel.png") no-repeat left top;
}

 

Sorular (0)