CSS arka plan özelliği, öğe üzerindeki arka plan efektlerini tanımlamak için kullanılır. HTML öğelerini etkileyen 5 CSS arka plan özelliği vardır:
- arka plan rengi
- arka plan görüntüsü
- arka plan tekrarı
- arka plan eki
- arka plan konumu
1) CSS arka plan rengi
Arka plan rengi özelliği, öğenin arka plan rengini belirtmek için kullanılır.
Arka plan rengini şu şekilde ayarlayabilirsiniz:
h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p>Şimdi Test Edin
Çıktı:
İlk CSS sayfam.
Merhaba Javatpoint. Bu, CSS arka plan renginin bir örneğidir.
2) CSS arka plan resmi
Arka plan resmi özelliği, bir resmi bir öğenin arka planı olarak ayarlamak için kullanılır. Varsayılan olarak görüntü öğenin tamamını kapsar. Bunun gibi bir sayfa için arka plan resmini ayarlayabilirsiniz.
body { background-image: url('paper1.webp'); margin-left:100px; }Şimdi Test Edin
4) CSS arka plan eki
Arka plan eki özelliği, arka plan resminin sabit olup olmadığını veya tarayıcı penceresinde sayfanın geri kalanıyla birlikte kaydırılıp kaydırılmayacağını belirtmek için kullanılır. Arka plan resmini sabit olarak ayarladıysanız, tarayıcıda kaydırma sırasında resim hareket etmeyecektir. Sabit arka plan görüntüsüne sahip bir örnek ele alalım.
background: white url('bbb.webp'); background-repeat: no-repeat; background-attachment: fixed;Şimdi Test Edin
5) CSS arka plan konumu
Arka plan konumu özelliği, arka plan görüntüsünün başlangıç konumunu tanımlamak için kullanılır. Varsayılan olarak arka plan resmi web sayfasının sol üst kısmına yerleştirilir.
Aşağıdaki konumları ayarlayabilirsiniz:
- merkez
- tepe
- alt
- sol
- Sağ
background: white url('good-morning.webp'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;Şimdi Test Edin