Web sayfanızda bulunan öğeler için arkaplan biçimlendirmesi yapmak için CSS’ te çeşitli Background özellikleri uygulanabilir. Bu özellikler:

background-color
background-image
background-repeat
background-attachment
background-position

Yukarıdaki özelliklerin açıklamaları ve örnek kullanımlarına bakalım.

CSS background-color Özelliği:

background-color özelliği, bir öğenin arka plan rengini belirtir.

Sayfanın arka plan rengi şöyle ayarlanır:


body {
    background-color: lightblue;
}

body {

background-color: lightblue;

}

Yukarıdaki örnekte arkaplan için renk, rengin adı ile belirtilmiştir. CSS’ te renk bildirimi çeşitli yöntemlerle yapılabilir. CSS Renklerle Çalışma konusu için bu sayfayı okumanınızı öneririz.

Arkaplan rengi sadece sayfa için kullanılmaz. Aşağıdaki örnekte <h1>, <p>, <h2> ve <div> öğeleri için arkaplan rengi ayarlamasının nasıl yapılacağı gösterilmiştir.


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}
h2 {
	background-color:#bb9944;
</style>
</head>
<body>

<h1>CSS Arkaplan Rengi Örnekleri!</h1>
<div>
Bu bir div elementidir.
<p>Bu paragrafa bir arkaplan rengi verilmiştir.</p>
Hala div elementindeyiz.
</div>
<h2>tasarimkodlama.com</h2>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

background-color: green;

}

div {

background-color: lightblue;

}

p {

background-color: yellow;

}

h2 {

background-color:#bb9944;

</style>

</head>

<body>

<h1>CSS Arkaplan Rengi Örnekleri!</h1>

<div>

Bu bir div elementidir.

<p>Bu paragrafa bir arkaplan rengi verilmiştir.</p>

Hala div elementindeyiz.

</div>

<h2>tasarimkodlama.com</h2>

</body>

</html>

Ekran Çıktısı:

CSS background-image Özelliği:

background-image özelliği, bir öğenin arka planı olarak kullanılacak bir görüntü belirtir.

Varsayılan olarak, görüntü tekrarlanır, böylece tüm elemanı kapsar.

Bir sayfanın arkaplan resmi şu şekilde ayarlanabilir:


body {
    background-image: url("bg.gif");
}

body {

}

Not: Bir arka plan resmi kullanırken, kullanıcıların metni okumasını zorlaştıracak resimleri kullanmamaya özen gösterin.

CSS background-repeat Özelliği:

Varsayılan olarak sayfaya eklenen arkaplan resmi yatayda ve dikeyde tekrarlanır. Bu durum kimi zaman istenmez. Bazı durumlarda eklenen resmin tekrarlanmaması, sadece yatay eksende tekrar etmesi veya sadece dikey olarak tekrar etmesi istenebilir.

Bu durumda background-repeat özelliği kullanılır.

Aşağıdaki örnekte background-repeat özelliğine değer verilmeyerek hem yatay hem dikeyde tekrar etmesi sonucu oluşan görüntüyü inceleyelim.


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("gradient_bg.png");
}
</style>
</head>
<body>

<h1>Web Tasarım CSS Dersleri</h1>
<p>tasarimkodlama.com</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

}

</style>

</head>

<body>

<h1>Web Tasarım CSS Dersleri</h1>

<p>tasarimkodlama.com</p>

</body>

</html>

Ekran Çıktısı:

Şimdi de background-repeat özeliğini kullanarak resmin sadece x ekseni yani yatayda tekrarını sağlayarak aradaki farkı inceleyelim. (repeat-x)


<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>www.tasarimkodlama.com</h1>
<p>Bu sayfadaki resim sadece yatay olarak tekrarlanmıştır.</p>
<p>Resmin orjinal hali aşağıdadır.</p>
<img src="gradient_bg.png">
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: repeat-x;

}

</style>

</head>

<body>

<h1>www.tasarimkodlama.com</h1>

<p>Bu sayfadaki resim sadece yatay olarak tekrarlanmıştır.</p>

<p>Resmin orjinal hali aşağıdadır.</p>

</body>

</html>

Yukarıdaki örnekte görüldüğü gibi background-repeat: repeat-x; özelliği ile resmin sadece yatayda tekrarı sağlanmıştır. Yukarıdaki kodlar sonucu ortaya çıkan ekran görüntüsünü incelediğinizde resmin orjinal halinin dar olduğunu göreceksiniz.

Resmin yatay eksende tekrarı sonucu sayfayı yatayda kapladığını göreceksiniz. Bu işlem resim dosya boyutlarının çok fazla olmaması ve sayfanın daha erken yüklenmesini sağlayacaktır.

Resmin sadece dikey eksende tekrarı için;

background-repeat: repeat-y;

Resmin yatay ya da dikeyde tekrar etmesini engellemek için ise;

background-repeat: no-repeat; kodlarını eklemek gerekecektir.

CSS background-attachement Özelliği:

Arka plan resminin sabitlenmesini yani kaydırma çubuğu kullanılarak sayfa yukar aşağı hareket ettirilse bile resmin sabit bir konumda kalmasını isterseniz ;

background-attachment:fixed; özelliğinden faydalanabilirsiniz.

Aşağıdaki kodları ve ekran çıktısını inceleyin.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tasarimkodlama.com</title>
    <style>
        body {
                background-image: url("logo.jpg");
                background-repeat: no-repeat;
                background-position: right top;
                margin-right: 200px;
                background-attachment: fixed;
            }
    </style>

</head>

<body>
    
    <h1>www.tasarimkodlama.com</h1>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>
    <p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>


</body>
</html>

<!doctype html>

<html>

<head>

<title>tasarimkodlama.com</title>

<style>

body {

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: fixed;

}

</style>

</head>

<body>

<h1>www.tasarimkodlama.com</h1>

<p>Resim sabitlenmiştir.Sayfayı aşağı yukarı kaydırın.</p>

</body>

</html>

Ekran Görüntüsü:

Yukarıdaki çıktıyı incelediğinizde sayfadaki Tasarım Kodlama logosunun scroll ile aşağı yukarı hareketi sonucu konumunun değişmediğini ve sabit kaldığını göreceksiniz.

Not: Deneme yaparken sayfanıza ait resmi eklemeyi unutmayın.

CSS background-position Özelliği:

CSS ile sayfalarınıza eklediğiniz ressimleri background-position özelliğini kullanarak konumlandırabilirsiniz.

background-position özelliğine aşağıdaki değerler verilebilir.

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Örnek:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tasarimkodlama.com</title>
    <style>
        body {
                background-image: url("logo.jpg");
                background-repeat: no-repeat;
                background-position: center;
            }
    </style>

</head>

<body>
    
    <h1>www.tasarimkodlama.com</h1>
    <p>Resim sayfanın ortasında konumlandırılmıştır.</p>
    <p>Resim sayfanın ortasında konumlandırılmıştır.</p>
    <p>Resim sayfanın ortasında konumlandırılmıştır.</p>
    <p>Resim sayfanın ortasında konumlandırılmıştır.</p>
    <p>Resim sayfanın ortasında konumlandırılmıştır.</p>
    <p>Resim sayfanın ortasında konumlandırılmıştır.</p>
    
</body>
</html>

<!doctype html>

<html>

<head>

<title>tasarimkodlama.com</title>

<style>

body {

background-repeat: no-repeat;

background-position: center;

}

</style>

</head>

<body>

<h1>www.tasarimkodlama.com</h1>

<p>Resim sayfanın ortasında konumlandırılmıştır.</p>

</body>

</html>

Çıktı:

CSS ile Arkaplan (Background) Biçimlendirme

CSS background-color Özelliği:

CSS background-image Özelliği:

CSS background-repeat Özelliği:

CSS background-attachement Özelliği:

CSS background-position Özelliği:

1 Yorum

İptal Et

CSS background-color Özelliği:

CSS background-image Özelliği:

CSS background-repeat Özelliği:

CSS background-attachement Özelliği:

CSS background-position Özelliği:

Bunları da beğenebilirsiniz

1 Yorum