Turkcell | Geleceği Yazanlar

201: HTML5 & CSS Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

CSS Zemin Özellikleri

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : 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:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. 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.