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'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'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>
Websitesi tasarlarken, bir bölgede tüm alanı kapsayacak bir arkaplan resmi ayarlamak istiyoruz. Bunu yapmak için şu adımları uygulamamız gerekmektedir.
<!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>
Sorular (0)