Web Programlama

CSS Zemin Özellikleri

Lisans: Creative Commons 11.12.2020 tarihinde güncellendi

Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

#css-zemin-ozellikleri #zemin-resmi #css-background #padding #repeat #background-position #attachment #web-programlama

CSS zemin özellikleri, bir elemanın zemin özel tanımlamak için kullanılır. Bu özellikler;

Zemin rengi,
Zemin görseli,
Zemin tekrarı,
Zemin ekleri,
Zemin pozisyonu'dur.

Zemin rengi

Bir elemanın zemininin rengini belirler. Sayfanın zemin rengi, body kısmında tanımlanır.

body {

    background-color: #c0d5fe;

}

CSS ile zemin rengi aşağıdaki biçimlerden biriyle belirlenir:

Bir HEX değeri: "#de0420"
Bir RGB değeri: "rgb(100,50,220)"
Bir renk adı: red, blue vb.

h1 {
    background-color: #6005fd;
}

p {
    background-color: #e23fde;
}

div {
    background-color: #cdef00;
}



Bir başka örneğe bakalım:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: #c2c5ff;
            }
        </style>
    </head>

    <body>
        <h1>CSS SAYFASI</h1>
        <p>GELCEGI YAZANLAR</p>
    </body>

</html>

Zemin resmi

Zemin resmi özelliği, elemanın zeminini oluşturacak görseli belirler. Normal olarak görsel zeminde tekrarlanır yani tüm zemini kaplar. Zemin resmi aşağıdaki gibi atanır:

body {
    background-image: url("gy.png");
}

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background: #ff0ccc url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/gy_maraton.jpg") no-repeat left top;
                padding-right: 150px;
            }
        </style>
    </head>

    <body>
        <h1>TURKIYE CUMHURIYETI</h1>
        <p>ISTANBUL</p>
        <p>ANKARA</p>
    </body>

</html>

No-repeat özelliği kaldırılınca zemin resmi sayfa boyunca tekrarlanır. Aşağıdaki kodda no-repeat özelliğinin kaldırılmasını görebilirsiniz:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background: #ff0ccc url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/gy_maraton.jpg")  left top;
                padding-right: 150px;
            }
        </style>
    </head>

    <body>
       
        <h1>TURKIYE CUMHURIYETI</h1>
        <p>ISTANBUL</p>
        <p>ANKARA</p>
       
    </body>
</html>

Zemin resminin yatay ve dikey tekrarı

Varsayılan olarak zemin resmi özelliği (background-image property) bir görseli sayfa içinde hem yatay hem de dikey olarak tekrarlar. Bazı resimlerin sadece yatay ya da dikey olarak tekrarlanması istenebilir. Eğer zemin resmi yatay olarak tekrarlanacaksa aşağıdaki gibi bir kod yazılmalıdır:

body {
    background-image: url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/mt.jpg");
    background-repeat: repeat-x;
}

Zemin resminin pozisyonu ve tekrarı

Zemin resmi pozisyonu background-position özelliği ile belirlenir. Aşağıdaki kod örneğinde, zemin resmi mt.png'nin tekrar ve pozisyon örneklerini görebilirsiniz:

body {

    background-image: url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/mt.jpg");

    background-repeat: no-repeat;

}

body {

    background-image: url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/mt.jpg");

    background-repeat: no-repeat;

    background-position: right top;

}

Zemin kısayol (background shorthand) özelliği

Yukarıda bahsedilen çeşitli özellikleri sadece background sözcüğü ile kısa ve toplu bir şekilde ifade etmek de mümkündür:

body {
    background: #fffeee url("https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/icerik/mt.jpg") no-repeat left top;
}

Shorthand özelliği kullanıldığı zaman, özellik değerlerinin sırası aşağıdaki gibidir:

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

Aşağıdaki tabloda zemin özelliklerinin tümü listelenmiştir:

Özellik	Açıklama
background	Bütün zemin özelliklerini tek bir bildiride gerçekleştirir.
background-attachment	Zemin resmi sabit mi yoksa sayfanın diğer kısmında hareket edecek mi bunu belirler.
background-color	Bir elemanın zemin rengini belirler.
background-image	Bir eleman için zemin resmini belirler.
background-position	Zemin resminin başlangıç pozisyonunu belirler.
background-repeat	Zemin resminin nasıl tekrarlanacağını belirler.

Sınava Gir