CSS'de background özelliği, HTML etiketleri için arka plan efektlerini tanımlamak için kullanılır.
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.
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 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 */
}
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");
}
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.
ö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;
}
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 :
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 :
CSS background-attachment kullanımı :
body {
background-image: url("gorsel.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
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 :
ş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)