Bu dersimizde CSS’de arkaplan özelliklerini ve alabileceği değerleri öğreneceğiz. Aşağıdaki tüm stil özelliklerini HTML sayfası üzerinde kendi editörünüzde deneyebilirsiniz.
<!DOCTYPE html> <html> <head> <title>Arkaplan (Background) Özellikleri</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- background-color --> <h2 class="anabaslik">Arka Plan Rengi (background-color)</h2> <div class="color"> <h2 class="renk">Bu başlığın arkaplan rengi doğrudan renk komutu ile girildi</h2> <h2 class="hex">Bu başlığın arkaplan rengi Hexadecimal olarak girildi</h2> <h2 class="rgb">Bu başlığın arkaplan rengi RGB (red, green, blue) olarak girildi</h2> </div> <!-- background-image --> <h2 class="anabaslik">Arka Plan Resmi (background-image)</h2> <div class="image"> <h1>Merhaba.. div etiketi için arkaplan resmi</h1> </div> <!-- background-position --> <h2 class="anabaslik">Arka Plan Pozisyonu (background-position)</h2> <div class="position"> <h1>Div etiketi içinde position gösterilmesi</h1> </div> <!-- bacground-repeat --> <h2 class="anabaslik">Arka Plan Tekrarlaması (background-repeat)</h2> <div class="repeat"> <h1>Tekrarlamayı x veya y yönünde yapabiliriz. Veya tekrar etme diyebiliriz.</h1> </div> <!-- background-size --> <h2 class="anabaslik">Arka Plan Büyüklüğü (background-size)</h2> <div class="bg-size"> <h2>Repeat-x ile x ekseni yönünde bu gri desen tekrarlandı</h2> Maymun resmi background-size ile 100px x 100px olacak şekilde küçültüldü Repeat-y ile y ekseninde tekrarlanması sağlandı Bu div içinde çoklu arkaplan resmi mevcut Resmi tam görebilmek için aşağıya kayması için Resmi tam görebilmek için aşağıya kayması için </div> <h2 class="anabaslik">Arka Plan Cover, Contain Değerleri (background-size)</h2> <div class="contain"> <h2>Background-size için Contain değeri </h2> <div class="cover"> <h2>Background-size için Cover değeri </h2> </div> </div> </body> </html>
Arkaplan Rengi (background-color)
Bu özelliğin alacağı değerler doğrudan yazılacağı gibi (Ör: red, white, purple, black) HEX renk kodları ve RGB renk skalası kullanılabilir.
.color{
background-color: gray;
border: 5px solid red;
}
.color p{
color:white;
}
/* Doğrudan renk kodu (ismi) yazılması */
.renk{
background-color: pink;
}
/* hexadecimal olarak renk ataması */
.hex{
background-color: #26af00;
}
/* RGB Renk kodu yazılması */
.rgb{
background-color: rgb(100,25,170);
color: rgb(255,255,255);
}
Arkaplan Resmi (background-image)
Örneklerde kullanılan arkaplan resimlerini indirmek için tıklayınız.
Arka plan stil atamalarında genellikle body etiketi içinde bulunan arka plan anlaşılmaktadır. Örneklerimizde hem body etiketine stil atama hem de anlaşılır, konu bütünlüğünün tek sayfada görülmesi bakımından DIV etiketleri arka planına stil ataması yapacağız.
.image{
border: 3px solid gray;
background-image: url(background2.jpg);
margin-top: 20px;
}
.image h1{
padding: 50px;
}
/* ------- background-image (body)---------
body{
background-image: url("background2.jpg")
}
*/
Yukarıdaki örneğe baktığınızda class ataması image olan DIV etiketinin arka planının mavi renkli desenle kaplandığını görürsünüz. background-image: url(“background2.jpg”) deklarasyonu ile arka planımıza bir veya daha fazla resim dosyası ekleyebiliriz. Aslında yüklediğiniz background2.jpg dosyası 100px x 100px boyutunda bir arka plan resmi. Bu kadar minik bir resim tüm DIV etiketini kapladı. Sebebi eğer siz aksini belirtmezseniz, default olarak eklediğiniz resim hem x ekseni yönünde hemde y ekseni yönünde (kısaca yatay ve dikey) tekrar ederek tüm arka planı kaplayacaktır.
Arkaplan Resminin Tekrar Etmesi (background-repeat)
Arka plan resmi örneğinde stil ataması default (varsayılan) olarak x yönünde tekrarlayarak etiketin bütün arka planını kaplamıştı. Bir çok web sayfasında bu özellik sıklıkla kullanılır. Örnekte belirtilen repeat.jpg resim dosyası 10px genişliğinde ve 100px yüksekliğinde, kendini tekrarlamaya uygun minik bir kapasiteye sahip resim dosyasıdır. Web sayfalarında bazen istenmeyen şu görüntüyü görmüşsünüzdür. Sayfa açılır ama arka plan resmi sunucunun veya sizin yavaş internet bağlantısına sahip olmanızdan dolayı açılması için beklenir. Haliyle yükse kapasiteli bir resmi arka plan yapmak avantajlı değildir. Bu sebeple minik resimler üzerinde tekrarlama yapılır ki bu yavaş açılma sorunlarını ortadan kaldırır.
.repeat{
margin-top: 20px;
padding: 100px;
border:1px solid black;
background-image: url("repeat.jpg"), url("repeat.jpg");
background-repeat: repeat-y, repeat-x;
}
Yukarıdaki örnekteki margin, padding, border deklarasyonlarını şuan için görmezden gelin. Asıl konumuz yukarıdaki örnekteki background-repeat: deklarasyonudur. Repeat deklarasyonu “repeat-x, repeat-y ve no-repeat” değerleri alır. Repeat-x belirtilen resmi arka sayfanıza x ekseni yönünde tekrar ederek döşeyecektir. Aynı şekilde repeat-y değeri ile y ekseni yönünde tekrarlayarak resmi sayfanıza döşeyecektir. Daha önceden söylediğimiz gibi eğer herhangi bir stil ataması yapılmamışsa x,y ekseni yönünde döşeme yapılacaktır. Bunu engelleyebilmek için “no-repeat” değeri kullanılır.
Örnekte hem x hemde y yönünde tekrarlamayı gösterebilmek için çoklu resim ve çoklu repeat özelliğini kullanıldı. Görüldüğü üzere background-image: deklarasyonu 2 veya daha fazla argüman taşıyabilir. url(“repeat.jpg”), url(“repeat.jpg”); şeklinde iki adet resim dosyası belirtilmiş. (aynı resim dosyası her iki argümanda belirtilmiş). Buna karşılık gelen background-repeat: deklarasyonu da argümanlara karşılık gelecek repeat-y ve repeat-x değerlerini taşımaktadır. Örnekte “.repeat class” seçicisinde bir resim dosyası hem x ekseni yönünde hem de y ekseni yönünde tekrarlaması sağlanmıştır.
Arkaplan Pozisyonu (background-position)
Arkaplana eklenen resimlere pozisyon deklarasyonu ile sayfa içinde yer belirtebiliriz. background-position: deklarasyonu, left, right, center, top ve bottom değerleri alabilir. Hatta bu değerler birlikte kullanılabilir. Ör: left top; center bottom; gibi.
.position{
border: 1px solid black;
margin-top: 20px;
padding:150px;
background-image: url("maymun.jpg");
background-repeat: no-repeat;
background-position: top center;
}
Arkaplan Resmi Sabitleme (background-attachment)
Arkaplana 1 veya daha çok resim eklenebilir. Bu resimler layer (katman) mantığıyla çalışırlar ki, ilk argüman en üstte gözükür, en son argüman ise en allta gözükür. Bundan neden bahsettik? Kısaca anlatmak gerekirse arkaplana bir resim o resmin üstüne gelecek daha küçük boyutlarda bir resim şeklinde eklemeler yapılabilir. Aşağıdaki örnekte body seçicisi için 2 adet resim eklenmiş, ilk resim maymun.jpg ismini taşımakta diğer arkaplan resmi ise dokusu sarı renkli background4.jpg isimli bir arkaplan resmi. İlk olarak maymun eklendiği için sarı renkli dokunun üstünde gözükecektir. background-position; deklarasyonu ile sağ üst (right top) tarafta konumlanması sağlanmıştır. Background-repeat deklarasyonuna 2 argüman tanımlanmış, ilk argüman maymun resmi için no-repeat değeri verilirken 2nci argüman olan backgroun4.jpg resmine repeat özellik değeri verilerek tüm arkaplana döşenmesi sağlanmıştır.
body{
background-image: url("maymun.jpg"), url("background4.jpg");
background-position: right top;
background-repeat: no-repeat, repeat;
background-attachment: fixed;
}
Konumuza geri dönersek yukarıdaki örnekte background-attachment deklarasyonunun fixed (sabitlendi) değeri aldığı görülmekte, bu değer ilk olarak eklenen ve en üstte sağ tarafta gözüken maymun resmini sayfanın yüksekliği arttıkça ve aşağıya doğru gittikçe sayfanın sağ üst köşesinde sabit kaldığını göreceksiniz. HTML’de hiyerarşiyi düşündüğümüzde body ilk element ve en alt katmanda bulunur. Body etiketi içine girilmiş her bir etiket hiyerarşi durumuna göre daha üstlerde gözükecektir. Bu sebeble maymun resmi arka planın üstteki resmi olmasına rağmen body etiketinin içine açılmış herhangi bir etiketin görsel olarak altında kalmaktadır.
Arkaplan Resim Büyüklüğü (background-size)
Background-size deklarasyonuna 3 farklı değer kullanılabilir. Bir resmin en boy büyüklükleri genel olarak px cinsinden verilebilir. Aşağıdaki örnekte .bg-size class seçicisinde background-size: 100px 100px; olarak verilmiştir. Bu değerler background-image: deklarasyonundaki ilk argümana atanmıştır ve maymun resmi 100px genişliğe 100px yüksekliğe sahip olmuştur. Ayrıca background-repeat: deklarasyonuyla ilk argüman olan maymun resmin repeat-y değeri verilerek y ekseninde tekrarlanması, 2nci argüman olarak verilen repeat-x değeri ise 2nci argüman olarak arkaplan resminin x eksenin yönünde tekrarlanmasını sağlamıştır.
.bg-size{
margin-top: 20px;
border:3px solid green;
background-image: url("maymun.jpg"), url("background.jpg");
background-size: 100px 100px;
background-repeat: repeat-y, repeat-x;
}
.bg-size h2,p{
padding: 50px;
margin-left: 100px;
}
Background-size: deklarasyonunun alacağı diğer değerleri ise cover ve contain değerleridir. Cover değeri ile arkaplana eklenmiş bir resim, eklendiği alanın genişliğine göre kendi genişliğini bu sınırlar içinde olacak şekilde kendini büyütür veya küçültür. Contain değeri için ise yükseklik baz alınarak resmin ekleneceği alanın yüksekliğine göre kendisini büyütür veya küçültür.
.cover{
border: 3px solid red;
margin-left: 50%;
background-image: url("maymun.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.contain{
border: 3px solid gray;
background-image: url("maymun.jpg");
background-repeat: no-repeat;
background-size: contain;
}
.contain h2{
padding: 100px;
}
Arkaplan (background) Deklarasyonunun Kısa Yazım Metodu
Bu deklarasyon; background: url | position | repeat | attachment; olarak belirtilir. Aşağıdaki örneği incelediğimizde;
body{
background: url("maymun.jpg") right top no-repeat fixed;
}
/* Çoklu arkaplan ekleme kısa yazım */
body{
background: url("maymun.jpg") right top no-repeat fixed, url(background2.jpg) left top repeat;
}
Bir önceki CSS3 ve HTML Dersleri | Renk (Color) Özellikleri konulu yazıma ulaşmak için tıklayınız…
Son Yorumlar