Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Gelişmiş Background (Arkaplan) Özelliklerini öğreneceğiz.
CSS Çoklu Arkaplan Resim Kullanımı
CSS'de etiketler için birden fazla arkaplan kullanabiliriz. Bunun için backgorund-image özelliğini kullanmamız yeterlidir.
Farklı arkaplan görüntüleri eklemek için virgül kullanabiliriz. İlk eklenen görsel her zaman en üstte gözükür.
Aşağıdaki örnekte iki arka plan resmi vardır, ilk resim bir çiçektir (alt ve sağa hizalanmış) ve ikinci resim kağıt arka plandır (sol üst köşeye hizalanmış):
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="box">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Yukarıda kullandığımız arkaplan özelliklerinin hepsini tek seferde background özelliği içerisinde belirtebiliriz. Her iki sonuçta aynı olacaktır.
#box {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
CSS Arkaplan Boyutu Düzenleme
CSS'de arkaplan boyutunu background-size özelliği ile belirtebiliriz. Değer olarak boyutlar, yüzdeler veya iki anahtar kelime alabilir. Bu anahtar kelimeler : contain ve cover değerleridir.
Aşağıdaki örnek, bir arka plan görüntüsünü orijinal görüntüden çok daha küçük olacak şekilde yeniden boyutlandırır (piksel kullanarak):
<!DOCTYPE html>
<html>
<head>
<style>
#box1 {
border: 1px solid black;
background: url(img_flwr.gif);
background-size: 100px 80px;
background-repeat: no-repeat;
padding: 15px;
}
#box2 {
border: 1px solid black;
background: url(img_flwr.gif);
background-repeat: no-repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>CSS Arkaplan Kullanımı</h1>
<p>Yeniden Boyutlandırılmış Arkaplan:</p>
<div id="box1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>Orjinal boyuta sahip arkaplanlar:</p>
<div id="box2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
CSS'de arkaplan boyutlandırma için diğer kullanımlar ise contain ve cover değerleridir.
CSS background contain kullanımı
CSS'de contain anahtar sözcüğü, arkaplana ait resimi mümkün olduğu kadar büyük olacak şekilde boyutlandırır. Ama dikkat edilmelidir ki, görselin boyutu koyulduğu alana sığmalıdır. Yani arkaplan resmi kapsadığı alana tam sığacak şekilde konumlanır.
CSS background cover kullanımı
CSS'de cover anahtar sözcüğü, arkaplan görselinin içerik alanını tamamen kapsayacak şekilde boyutlandırır.
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(resim.png);
background-repeat: no-repeat;
background-size: contain;
}
.div2 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(resim.png);
background-repeat: no-repeat;
background-size: cover;
}
.div3 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(resim.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>No background-size defined:</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<p>Orjinal Görsel:</p>
<img src="resim.png" alt="Flowers" width="224" height="162">
</body>
</html>
CSS Birden Çok Arkaplan Resminin Boyutlandırılması
CSS'de background-size özelliği, birden fazla arkaplan var ise virgülle ayrılarak boyutlandırmalar tanımlandırılabilir.
Aşağıdaki örnekte, her görüntü için farklı arka plan boyutu değeriyle belirtilen üç arka plan görüntüsü vardır:
#box {
background: url(resim1.png) left top no-repeat, url(resim2.png) right bottom no-repeat, url(resim3.png) left top repeat;
background-size: 50px, 130px, auto;
}
CSS Tam Boy (Full Size) Arkaplan Yapma
Websitesi tasarlarken, bir bölgede tüm alanı kapsayacak bir arkaplan resmi ayarlamak istiyoruz. Bunu yapmak için şu adımları uygulamamız gerekmektedir.
- background-size : cover; özelliğini kullanarak tüm alanı resim ile kaplayın.
- Seçeceğiniz resim ölçeklendirilmesi doğru olmalıdır.
- Resmi ortalamamız geremektedir.
- Kaydırma çubukları görseli etkilememelidir
<!DOCTYPE html>
<html>
<head>
<style>
html {
background: url(resim.jpg) no-repeat center fixed;
background-size: cover;
}
body {
color: white;
}
</style>
</head>
<body>
<h1>Tam Boyut Arkaplan</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
CSS background-origin kullanımı
CSS'de background-origin özelliği, arkaplan görselinin nereye yerleştirileceğini belirtir.
Özellik üç farklı değer alabilir:
- border-box - arka plan resmi, sınırın sol üst köşesinden başlar
- padding-box - (varsayılan) arka plan resmi, iç kenarının sol üst köşesinden başlar
- content-box - arka plan resmi içeriğin sol üst köşesinden başlar
<!DOCTYPE html>
<html>
<head>
<style>
#box1 {
border: 10px solid black;
padding: 35px;
background: url(resim.png);
background-repeat: no-repeat;
}
#box2 {
border: 10px solid black;
padding: 35px;
background: url(resim.png);
background-repeat: no-repeat;
background-origin: border-box;
}
#box3 {
border: 10px solid black;
padding: 35px;
background: url(resim.png);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h1>background-origin Kullanımı</h1>
<p>Varsayılan:</p>
<div id="box">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
<div id="box2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: content-box:</p>
<div id="box3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
CSS background-clip kullanımı
CSS background-clip özelliği, arka planın boyama alanını belirtir.
Özellik üç farklı değer alır:
- border-box - (varsayılan) arka plan, sınırın dış kenarına boyanır
- padding-box - arka plan dolgunun dış kenarına boyanır
- content-box - arka plan içerik kutusunun içinde boyanır
#box {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
