CSS Arka Plan Kullanımı
HTML öğelerinin arka plan efektlerini tanımlamak için CSS Arka plan özeliklerinden faydalanabilirsiniz. Şimdi bu özelliklerin neler olduğuna ve nasıl kullanıldıklarına bakalım;
1-background-color
background-color özelliği bir HTML öğesinin arka plan rengini belirlemenizi sağlar.
|
1 2 3 4 5 |
body { background-color: aqua; } |
Yukarıdaki örnekte sayfanızın tüm arka plan rengini aqua yapmanızı sağlar.
CSS ile bir renk seçimini, genellikle aşağıdakiler şekillerden biri ile belirlenir.
- geçerli bir renk adı – “red” gibi
- bir Hex değeri – “# ff0000” gibi
- bir RGB değeri – “rgb (255,0,0)” gibi
CSS ile Renkler üzerine daha fazla bilgi almak için CSS Renkler başlıklı konuda inceleme yapabilirsiniz.
Örnek ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <style> h1 { background-color: aqua; } div { background-color: rgb(100,150,100); } p { background-color: #FFFF00; } </style> </head> <body> <h1>CSS Arka Plan Renkleri Belirleme</h1> <div> Bu bir div elementidir. <p>Bu bir paragraf metindir.</p> div elementi bu noktadan sonra devam etmektedir. </div> </body> </html> |
Yukarıdaki örnekte HTML belgesi içinde bulunan <h1> <div> <p> öğelerinin arkaplan renkleri farklı renk gösterim şekilleri kullanılarak tanımlanmıştır.
2-background-image
background-image özelliği bir HTML öğesinin arka plan resmini tayin etmenizi sağlar. Varsayılan olarak, resim tüm elemanı kapsayacak şekilde tekrarlanır.
Bir sayfanın arka plan resmi aşağıdaki şekilde ayarlayabilirsiniz.
|
1 2 3 4 5 |
body { background-image: url("resim.jpg"); } |
Not : 
“resim.jpg” dosyası, sayfa ile aynı dizinde olduğu varsayılarak url() yolu yazılmıştır.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <style> body { background-image: url(resim.png); } </style> </head> <body> <h1>CSS Arka Plan Resmi</h1> <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p> </body> </html> |
Sayfa tasarımlarında arka plan resmi kullanmak her zaman iyi bir bikir olmayabilir. Bir arka plan resmi kullanırken, metni rahatsız etmeyen bir görüntü kullanmanız tavsiye edilir.
3-background-repeat : repeat-x , repeat-y ,no-repeat
background-image özelliği ile tanımladığınız arka plan resmi resmin büyüklüğü ile orantılı olarak yatayda ve dikeyde tekrarlanarak tüm zemini dolduracaktır. Ancak tekrarlama sürecini sadece yatay (repeat-x), sadece dikey(repeat-y) veya tekrarsız(no-repeat) bir şekilde yapılmasını isteyebilirsiniz.
repeat-x kullanımına dair bir örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> body { background-image: url(resim.png); background-repeat: repeat-x; } </style> </head> <body> <h1>CSS Arka Plan Resmi</h1> <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p> </body> </html> |
repeat-y kullanımına dair bir örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> body { background-image: url(resim.png); background-repeat: repeat-y; } </style> </head> <body> <h1>CSS Arka Plan Resmi</h1> <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p> </body> </html> |
no-repeat kullanımına dair bir örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> body { background-image: url(resim.png); background-repeat: no-repeat; } </style> </head> <body> <h1>CSS Arka Plan Resmi</h1> <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p> </body> </html> |
background-position
Arka plan resmini sayfanızın belirli bir konumuna veya merkezine yerleştirebilirsiniz. Bunun için background-position özelliğine konumlandırmak istediğiniz yeri belirtmeniz yeterli olacaktır.
background-position özelliğinin alabileceği değerler;
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> body { background-image: url(yazilimbilisim.png); background-repeat:no-repeat; background-position: right top; } </style> </head> <body> <h1>CSS Arka Plan Resmi</h1> <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p> <div> </div> </body> </html> |
Yukarıdaki örneğimizde arka plan resmi sağ-üst köşeye yerleşmesi sağlanmıştır.
background-attachment
Sayfa içeriğiniz ne kadar uzun olursa olsun arka plan resmini sabitlemek istiyorsanız background-attachment özelliğine, sayfanın geri kalanıyla birlikte kaydırma yapmayacağınızı belirtmek için fixed değeri ile birlikte kullanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <style> body { background-image: url(yazilimbilisim.png); background-repeat:no-repeat; background-position:right top; background-attachment: fixed; } div{ height: 4000px; background-color: cadetblue; } </style> </head> <body> <h1>CSS Arka Plan Resmi</h1> <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p> <div>Bu div öğesi 4000px uzunluğundadır.</div> </body> </html> |
background
Kodu kısaltmak için, tek bir bildirimde tüm arka plan özelliklerini belirtmek de mümkündür. Buna, kısaltılmış bildirim denir.
background özelliği kısaltılmış bir bildirim özelliğidir. Kısaltmayı kullanırken sıralamanız şöyle olmalıdır.
|
1 2 3 |
background : background-color background-image background-repeat background-attachment background-position |
Özellik değerlerinden birinin eksik olduğu durumda, diğerleri bu sırada olduğu sürece herhangi bir sorun oluşturmaz.
Örnek
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> body { background: #AA0000 url(yazilimbilisim.png) no-repeat fixed right top; } div{ height: 4000px; background-color: cadetblue; } </style> </head> <body> <h1>CSS Arka Plan Resmi</h1> <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</p> <div> </div> </body> </html> |
background-size
CSS3 ile birlikte gelen background-size özelliği arka plan görüntülerinin boyutunu belirlemenizi sağlar. CSS3’ten önce, bir arka plan resminin boyutu, resmin gerçek boyutuydu. Bir arka plan resmini tam ekran yapabilmek için farklı tekniklerden faydalanıyorduk. Ancak CSS3, arka plan görüntülerini farklı bağlamlarda yeniden kullanmamızı sağlıyor.
Boyutlar, uzunluklar, yüzdeler veya iki anahtar kelimeden birini kullanarak belirtilebilir: içerme veya kapak.
Örnek;
Aşağıdaki örnek, bir arka plan resmini orijinal resminkinden çok daha küçük boyuta getirir (pikselleri kullanarak):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <title>CSS ile dikey ortalama</title> <style> .arkaplan1{ border: 1px solid black; background:url(yazilimbilisim-logo.png); background-repeat: no-repeat; padding:35px; } .arkaplan2 { border: 1px solid black; background:url(yazilimbilisim-logo.png); background-size: 80px 80px; background-repeat: no-repeat; padding:15px; } </style> </head> <body> <h1>Arka Plan Resim Kullanımı</h1> <div class="arkaplan1"> <h2>Orjinal Arkaplan Resmi</h2> <p>Bu div öğesinin arkasında kullanılan arkaplan resmi orjinal boyutundadır.</p> </div> <br> <div class="arkaplan2"> <h2>Boyutlandırılmış Arkaplan Resmi</h2> <p>Bu div öğesinin arkasında kullanılan arkaplan resmi daha orjinalinden da küçük boyuttadır.</p> </div> </body> </html> |
Örnek;
Tam ekran arka plan resmi yapabilirsiniz. Bunun için background-size özelliğine “cover” değeri atamanız yeterlidir.
[…] CSS Arka Plan (Background) Özellikleri […]