Bu yazımda Css’te background özelliklerini ve bunları nasıl kullanabileceğimizi öğreneceğiz. Background özellikleri ile arkaplan rengi verme, arkaplan’a resim yerleştirme vb.. işlemlerimizi yapabiliriz.
Şimdi tek tek bu özellikleri uygulamalı bir şekilde inceleyelim.
CSS BACKGROUND COLOR ÖZELLİĞİ
Bu özellik ile bir html etiketine veya sayfanın tamamına arkaplan rengi verebiliriz.
Örneğin iki adet h2 etiketi tanımlayıp birincinin arkaplan rengini sarı, ikincinin arkaplan rengini kırmızı yapalım ve tarayıcıdaki durumunu inceleyelim.
|
1 2 3 4 5 |
<h2 style="background-color:yellow;">Arkaplan rengini sarı oldu.</h2> <h2 style="background-color:red;">Arkaplan rengini kırmızı oldu.</h2> |
CSS BACKGROUND İMAGE ÖZELLİĞİ
Bu özellik ile bir html etiketine veya sayfanın tamamına arkaplan resmi koyabiliriz.
Örneğin, body etiketinin arkaplanına 100×100 px’lik bir resim yerleştirelim ve tarayıcıdaki durumunu inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { background-image: url("image.jpg"); } </style> </head> <body> </body> </html> |
Gördüğünüz gibi resmin boyutu küçük olduğu için, varsayılan olarak sayfa tamamen dolana kadar resim x ve y ekseninde kendini tekrar ediyor.
Bazı durumlarda resmin sadece x ekseninde veya sadece y ekseninde tekrar etmesini isteyebiliriz. Bu gibi durumlarda background-repeat özelliğini kullanmamız gerekiyor.
CSS BACKGROUND REPEAT ÖZELLİĞİ
Bu özellik ile resimlerin tekrar edip etmeme durumlarını ayarlayabiliriz.4 değer verebiliriz. Bunlar;
► repeat-x : Resim x ekseninde tekrar eder.
► repeat-y : Resim y ekseninde tekrar eder.
► no-repeat : Resim tekrar etmez.
► repeat : Varsayılan değerdir.Resim x ve y eksenlerinde tekrar eder.
Şimdi body etiketinin arkaplanına resim ekleyelim ve bu durumları örnekleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { background-image: url("image.jpg"); background-repeat:repeat-x; } </style> </head> <body> </body> </html> |
Gördüğünüz gibi resim sadece x ekseninde tekrar ediyor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { background-image: url("image.jpg"); background-repeat:repeat-y; } </style> </head> <body> </body> </html> |
Gördüğünüz gibi resim sadece y ekseninde tekrar ediyor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { background-image: url("image.jpg"); background-repeat:no-repeat; } </style> </head> <body> </body> </html> |
Gördüğünüz gibi resim tekrar etmiyor.
CSS BACKGROUND POSİTİON ÖZELLİĞİ
Bu özellik ile yerleştirmiş olduğumuz resmin sayfadaki konumunu belirleyebiliriz. 5 değer verebiliriz. Bunlar;
► top : üstte
► bottom : altta
► right : sağda
► left : solda
► center : ortada
Şimdi sayfaya biraz yazı ekleyelim ve body etiketinin arkaplanına resim yerleştirelim.
background-position özelliği ile resmin sayfanın sağ üst köşede konumlandırılmasını sağlayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> body { background-image: url("elma.jpg"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } </style> <h1>Css Dersleri</h1> <p>Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel vehicula ut laoreet ac, aliquam sit amet justo nunc tempor.</p> <p> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel vehicula ut laoreet ac, aliquam sit amet justo nunc tempor.</p> |
Gördüğünüz gibi resim sağ üst köşede konumlandırıldı.
CSS BACKGROUND ATTACHMENT ÖZELLİĞİ
Bu özellik ile arkaplana yerleştirdiğimiz resmin sabit kalmasını sağlayabiliriz.
Örneğin sayfamızda uzunca bir yazı var diyelim ve arkaplan’a bir resim yerleştirdik. Yazıyı okurken scroll ile aşağı indikçe resimde yukarda kalacağı için artık gözükmeyecektir.
background-attachment özelliğine fixed değeri verdiğimiz takdirde resim bulunduğu yere sabitlenecektir. Yazıyı okurken istediğiniz kadar aşağılara inin resim hep ekranımızda görünecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style> body { background-image: url("elma.jpg"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment:fixed; } </style> <h1>Css Dersleri</h1> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> <p>Tincidunt integer eu augue augue nunc elit dolor</p> |
Resmi sağ üst köşede konumlandırıp, background-attachment özelliğine fixed değeri vererek sabitliyoruz.
Scroll ile aşağı doğru inildiğinde resim olduğu yerde sabit kalacaktır.
CSS BACKGROUND SİZE ÖZELLİĞİ
Bu özellik ile arkaplana yerleştirdiğimiz resmin boyutlarını ayarlayabiliriz. Verebileceğimiz değerleri bir örnek üzerinde inceleyelim.
5 adet <div> etiketi oluşturalım ve genişlik yükseklik değerine 250px verelim.
Div’in arkaplanına yerleştireceğimiz resim ise 140px genişliğinde 200px yüksekliğinde.
|
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 39 40 41 42 43 44 45 46 |
<style> div { width: 250px; height: 250px; border: 5px solid yellow; background-image: url('mst.png'); background-repeat: no-repeat; } #auto{ background-size:auto; } #px{ background-size: 180px 60px; } #yuzde{ background-size: 50% 50%; } #contain{ background-size:contain; } #cover{ background-size:cover; } </style> <h2>background-size:auto;</h2> <div id="auto"></div> <h2>background-size: 180px 60px;</h2> <div id="px"></div> <h2>background-size: 50% 50%;</h2> <div id="yuzde"></div> <h2>background-size:contain;</h2> <div id="contain"></div> <h2>background-size:cover;</h2> <div id="cover"></div> |
► auto : Varsayılan değerdir. Resim orjinal boyutlarında yerleştirilir.
► uzunluk değerleri : İki değer verilirse, birinci değer genişlik için ikinci değer ise yükseklik için uygulanır. Tek değer verilirse, hem genişlik hemde yükseklik için bu değer uygulanır.
Örneğimizde resmin genişliği 180px yüksekliği 60px olacak şekilde yerleştirildi.
► yüzde olarak değer : İki değer verilirse, birinci değer genişlik için ikinci değer ise yükseklik için uygulanır. Tek değer verilirse, hem genişlik hemde yükseklik için bu değer uygulanır.
Örneğimizde resmin genişliği ve yüksekliği içerisinde bulunduğu div’in yarısını kaplayacak şekilde yerleştirildi.
► contain : Resmin genişlik ve yükseklik değerlerinden büyük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir.
Örneğimizde resmin yüksekliği (200px) genişliğinden (140px) büyük olduğu için, div içerisini kaplayacak biçimde y ekseninde genişleyecek ve en boy oranının değişmemesi için genişlik değeride değişecektir.
► cover : Resmin genişlik ve yükseklik değerlerinden küçük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir.
Örneğimizde resmin genişliği (140px) yüksekliğinden (200px) küçük olduğu için resim, div içerisini kaplayacak biçimde x ekseninde genişleyecek ve en boy oranının değişmemesi için yükseklik değeride değişecektir.
¡ Cover değeri kullanıldığında genellikle background-position : center center; özelliği ile birlikte kullanılıyor.
CSS BACKGROUND ORİGİN ÖZELLİĞİ
Bu özellik ile bir etikete vermiş olduğumuz arkaplan resminin başlangıç alanını belirleyebiliriz. 3 değer verebiliriz. Bunlar;
► padding-box : Varsayılan değerdir. Resmin padding alanından başlamasını sağlar.
► border-box : Resmin border alanından başlamasını sağlar.
► content-box : Resmin içerik alanından başlamasını sağlar.
Verebileceğimiz değerleri bir örnek üzerinde inceleyelim.
3 adet div etiketi oluşturalım ve arkaplanına bir resim yerleştirelim.
background-origin özelliğine 3 değeri de verip durumlarını tarayıcıda inceleyelim.
|
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 |
<style> div { width: 100px; height: 100px; padding:20px; border: 10px solid rgba(255, 0, 0, 0.4); background-image: url('ps.jpg'); background-repeat: no-repeat; } #padding{ background-origin:padding-box; } #border{ background-origin:border-box; } #content{ background-origin:content-box; } </style> <h3>background-origin:padding-box;</h3> <div id="padding"></div> <h3>background-origin:border-box;</h3> <div id="border"></div> <h3>background-origin:content-box;</h3> <div id="content"></div> |
CSS BACKGROUND CLİP ÖZELLİĞİ
Bu özellik ile bir etikete vermiş olduğumuz arkaplan renginin başlangıç alanını belirleyebiliriz. 3 değer verebiliriz. Bunlar;
► padding-box : Varsayılan değerdir. Rengin padding alanından başlamasını sağlar.
► border-box : Rengin border alanından başlamasını sağlar.
► content-box : Rengin içerik alanından başlamasını sağlar.
Verebileceğimiz değerleri bir örnek üzerinde inceleyelim.
3 adet div etiketi oluşturalım ve arkaplan rengini mavi yapalım.
background-clip özelliğine 3 değeri de verip durumlarını tarayıcıda inceleyelim.
|
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 |
<style> div { width: 100px; height: 100px; padding:20px; border: 10px dotted black; background-color:cornflowerblue; } #padding{ background-clip:padding-box; } #border{ background-clip:border-box; } #content{ background-clip:content-box; } </style> <h3>background-clip:padding-box;</h3> <div id="padding"></div> <h3>background-clip:border-box;</h3> <div id="border"></div> <h3>background-clip:content-box;</h3> <div id="content"></div> |
Son olarak, anlattığımız bu özelliklerin tamamını daha kısa yazmak için sadece background özelliğinide kullanabilirsiniz.
Şu şekilde kullanıyoruz.
|
1 2 3 |
background: background-color background-image background-position/background-size background-repeat background-origin background-clip background-attachment ; |
Tarayıcı uyumluluğu ile ilgili bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
