Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS

CSS Arkaplan İşlemleri

CSS Arkaplan işlemleri. Arkaplan bir web sitesinin görsel sunumunda çok önemlidir. CSS dili ile web sitemizin arka planını renklendirme, arka plana görsel yerleştirme, görseli yönetme gibi işlemleri yapabiliriz.

Zemin için en önemli özellikler şunlardır;
  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment
  • shorthand (steno) özelliği

CSS Arkaplan renk verme - Background-color özelliği

Bu özellik bir elemanın arka plan rengini ayarlamak için kullanılır.

Bir örnek ile size bunu gösterelim.

body {
    background-color: #e4e600; <!-- Bu satır ile <body> etiketine, yani tüm web sitesine bir renk verdik. -->
}

Bu özelliğe isterseniz renk adı ile, isterseniz HEX veya RGB özelliği ile renk verebilirsiniz.

HTML kodu üzerinde deneyelim:

<html>
<head>
	<title>Arda Karaçayır – CSS Dersleri</title>
	<style type="text/css">
		body{
			background-color: #e4e600;
}
	</style>
</head>
<body>
</body>
</html>

CSS Arkaplan Resim Ekleme - Background-image özelliği

Bu özellik bir elemanın arka planına görsel yerleştirebiliriz.

Sayfanın tamamını kaplayacak bir örnek ile size bunu gösterelim.

body {
    background-image: url("resimler/resim.jpeg"); <!-- Bu satır ile <body> etiketine, yani tüm web sitesinin arka planına resim belirledik. Tıpkı harici dosyadan CSS çeker gibi resimleri de URL değeri ile sitemize başka konumlardan çekiyoruz. -->
}

Arka plan resmi eklerken öğenin metin içeriğinin okunabilirliğini etkilemediğinden emin olun…

HTML kodu üzerinde deneyelim:

<html>
<head>
	<title>Arda Karaçayır – CSS Dersleri</title>
	<style type="text/css">
		body {
			background-image: url("resimler/resim.jpeg");
			}
	</style>
</head>
<body>
</body>
</html>

CSS Arkaplan Tekrar Eden Resim - Background-repeat özelliği

Bu özellik aile arka plana yerleştirdiğimiz görseli farklı şekilde konumlandırabiliriz. X ve Y ekseninde yenilenecek veya yenilenmeden tek seferde görülecek şekilde yerleşim yaptırabiliriz.

4 farklı repeat değeri vardır;

  • background-repeat: repeat; bu özellik ile arka plana eklediğimiz görselin X ve Y koordinatında sürekli yenilenmesini sağlar. Fakat bu özelliği kullanmamıza gerek yok, çünkü background-repeat özelliğinin varsayılanı budur.
  • background-repeat: no-repeat; bu özellik ile arka plana eklediğimiz görselin tekrar etmeden durmasını, yani bir defa görünmesini sağlarız.
  • background-repeat: repeat-x; arka plan görselimizi X koordinatında yenilememizi sağlar.
  • background-repeat: repeat-y; arka plan görselimizi Y koordinatında yenilememizi sağlar.

background-repeat: repeat; örneği:

body {
    background-image: url("resimler/resim.jpeg");
    background-repeat; repeat;
}

background-repeat: no-repeat; örneği:

body {
    background-image: url("resimler/resim.jpeg");
    background-repeat; no-repeat;
}

background-repeat: repeat-x; örneği:

body {
    background-image: url("resimler/resim.jpeg");
    background-repeat; repeat-x;
}

background-repeat: : repeat-y; örneği:

body {
    background-image: url("resimler/resim.jpeg");
    background-repeat; repeat-y;
}

background-position özelliği

Bu özellik görselin sayfada ki konumunu belirler.

11 farklı position değeri vardır.

background-position: top left; görsel sol ve üst tarafta konumlandırılır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: top left;
}

background-position: top center; görsel orta ve üst tarafta konumlandırılır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: top center;
}

background-position: top right; görsel sağ ve üst tarafta konumlandırılır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: top right;
}

background-position: center left; görsel orta ve sol tarafta konumlandırılır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: center left;
}

background-position: center center; görsel tam ortaya konumlandırılır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: center center;
}

background-position: center right; görsel orta ve sağ tarafta konumlandırılır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: center right;
}

background-position: bottom left; görsel alt ve sol tarafta konumlandırılır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: bottom left;
}

background-position: bottom center; görsel tam alta ve ortaya konumlandırılır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: bottom center;
}

background-position: bottom right; görsel alt ve sağ tarafta konumlandırılır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: bottom right;
}

background-position: x% y%; görselimizi yatay ve dikey olarak yüzde ile konumlandırmamızı sağlar. İlk yüzde yatay, ikinci yüzde dikeyin konumlandırmasıdır.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: 50% 40%;
}

background-position: xpos ypos; tıpkı x% y% gibi yatay ve dikey konumlandırırız. Bunu yüzde yerine piksel ile yaparız. İlk pikselli rakam yatay, diğeri dikeydir.

Örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: 500px 400px;
}

Background-attechment özelliği

Bu özellik ile eklediğimiz görselin sayfa ile kayıp kaymayacağını ayarlamamızı sağlar. Yani görselin kaydırma çubuğu ile beraber hareket edip etmemesini bu değerler (fixed, scroll) ile sağlarız.

Kaydırmak için örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: top right;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Kaydırmamak için örnek:

body {
    background-image: url("resimler/resim.jpeg");
    background-position: top right;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

Shorthand (steno) özelliği

Programlama ve yazılımda kodların işlevi kadar temizliği ve kısalığı önemlidir. Temiz ve kısa kod yazarak hem bilgisayarın işleme hızını, hem de kodun okunabilirliğini önemli ölçüde arttırırız. Size background özelliklerinden oluşturulmuş uzun bir kod ve kısa halini örnek ile gösterelim.

body {
    background-color: #f0e68c;
    background-image: url("resimler/resim.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top right;
}

Şimdi bu uzun ve satırlar alan kodu en kısa halinde yazalım kısaltmanın ayrıntılarımı verelim.

body {
    background: #f0e68c url("resimler/resim.jpeg") no-repeat fixed top right;
}

Steno özelliği ile bütün değerleri tek özelliğin içinde belirttik. CSS’de bir çok özellikte steno stilinde kod yazabiliriz. Steno ile aynı özelliği ihtiva eden bütün değerleri tek değermiş gibi yazabiliriz.

Background özelliğinin steno stilinin kullanımında sıranın önemi vardır. Sıra ise;

  • color
  • image
  • repeat
  • attachment
  • position

CSS'de Arka plan işlemeri dersimiz bitti. Bir sonra ki dersimiz font ve text işlemleri ile ilgilidir.

Yorum Yap

Not: Yorum alanı HTML kod desteklememektedir...
Gönder
Yorum gönderildi. Onaylandıktan sonra yayınlanacaktır.
© 2020 - Arda KARAÇAYIR | Freelance Web Developer