CSS ile Zemin resmini değiştirme

Bu yazımızda CSS ile zemin rengini değiştirmeyi inceleyeceğiz. Web tasarım işlemlerinde çok sık rastladığımız bir olayı yapacağız, logoyu zeminde tekrarlattıracağız. Bu işlem için aşağıdaki kod satırını kullanacağız.

background-image: url('logo.png');

Yukarıdaki kod satırı ile logo.png dosyasını web sitemizin zemininde yatayda ve dikeyde tekrarlattırıyoruz. Sadece yatayda tekrarlatmak için aşağıdaki kod satırını yazıyoruz.

background-repeat:repeat-x;

Sadece dikeyde tekrarlatmak için aşağıdaki kod satırını yazıyoruz.

background-repeat:repeat-y;

Tüm kodları aşağıda bulabilirsiniz, bu kodları kopyalayıp kaydedebilirsiniz, dosya uzantısını htm veya html kaydetmeyi unutmayınız.

<!DOCTYPE html>

<html>

<head>

<title>Zemin Logo Örneği</title>

body{

background-image: url('logo.png');

}

.beyaz{color:#FFF;}

</style>

</head>

<body>

<h1 class="beyaz">Zemine Logo</h1>

</body>

</html>

Aşağıdaki kodlarda ise logomuzun no-repeat ile tekrarlanmasını önleyip sonra yatayda ve dikeyde ortalıyoruz. İlk parametre dikeyde hizalamak için kullanılır, bu parametre top(üst), bottom(alt), center(merkez) olabilir. İkinci parametre ise yatayda hizalamak için kullanılır, bu parametre left(sol), right(sağ), center(merkez) olabilir.

background-image: url('logo.png');

background-repeat : no-repeat;

background-position:center center;

Mutlu kodlamalar,
Oğuzhan TAŞ
Aralık, 2017