Beytullah Toprak
CSS Temel – CSS Arka Plan (Background)

CSS Temel – CSS Arka Plan (Background)


Bu bölüm, çeşitli HTML öğeleri'nin CSS ile arka planını nasıl ayarlayacağımızı öğreneceğiz. CSS arka plan özellikleri, elemanların arka plan stillerini tanımlamak için kullanılır.

CSS gibi bir elementin arkaplanını stil için çeşitli özelliklerini sağlar: background-colorbackground-imagebackground-repeatbackground-attachmentve background-position. Aşağıdaki bölüm, bu özellikleri arka planlar için farklı stilleri birer birer ayarlamak için nasıl kullanacağınızı örneklerle göreceğiz.

Arka Plan Rengi (background-color)

background-color Nitelik bir elemanın arka plan rengini ayarlamak için kullanılır.

Aşağıdaki örnek, bir web sayfasının arka plan renginin nasıl ayarlanacağını gösterir.

<!DOCTYPE html>
<html lang="tr">
<head>
<title>CSS background-color Örneği</title>
<style type="text/css">
	body {
		background-color: #f0e68c;
	}
	h1 {
		background-color: #f08080;
	}
	p {
		background-color: #90ee90;
	}
</style>
</head>
<body>
    <h1>Bu Bir Başlık</h1>
    <p>Bu bir deneme paragraf yazısı.</p>
</body>
</html>

CSS'deki renkler en çok aşağıdaki yöntemlerle belirtilir:

  • HEX değeri - "# ff0000" gibi
  • "rgb (255,0,0)" gibi bir RGB değeri
  • Bir renk ismi - "red" gibi

Arka Plan Görüntüsü (background-image)

background-image Mülkiyet, bir HTML öğesinin arka plan olarak bir resim ayarlayın.

Bir sayfa için arka plan görüntüsünün nasıl ayarlanacağını gösteren aşağıdaki örneğe bakın.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS background-image Örneği</title>
  <style type="text/css">
    body {
        background-image: url("https://localhostwp-content/uploads/2019/02/logo-1.png");
    }
  </style>
</head>
<body>
  <h1>Bu Bir Başlık</h1>
  <p>Bu bir deneme paragraf yazısı.</p>
</body>
</html>

Arkaplan Tekrarı (background-repeat)

background-repeat Özellik kullanarak , bir arka plan görüntüsünün bir html öğesinin arka planında nasıl döşeneceğini kontrol edebilirsiniz. Arka plan görüntüsünü dikey olarak (y ekseni), yatay olarak (x ekseni), her iki yönde veya her iki yönde tekrarlayabilirsiniz.

Dilimlenmiş görüntüyü yatay olarak tekrarlayarak bir web sayfasının arka planını nasıl ayarlayacağınızı gösteren aşağıdaki örneğe bakın.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS background-repeat Örneği</title>
  <style type="text/css">
    body {
        background-image: url("https://i.hizliresim.com/v67vmz.png");
        background-repeat: repeat-x;
    }
  </style>
</head>
<body>
    <h1>Bu Bir Başlık</h1>
    <p>Bu bir deneme paragraf yazısı.</p>
</body>
</html>

Arka Plan Eki (background-attachment)

background-attachment Özelliği arka plan görüntü görünüm ya da ihtiva eden blok ile birlikte kayar ve ilgili olarak sabit olup olmadığını belirler.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS background-attachment Örneği</title>
  <style type="text/css">
    body {        
        width: 250;
        height: 200px;
        overflow: scroll;
        background-image: url("https://i.hizliresim.com/EmM4pg.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }
  </style>
</head>
<body>
  <h1>background-image Örneği</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <br><br><br><br><br><br><br><br><br><br><br><br><br>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <br><br><br><br><br><br><br><br><br><br><br><br><br>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <br><br><br><br><br><br><br><br><br><br><br><br><br>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Arkaplan Konumu (background-position)

background-position arka plan görüntüsü konumunu kontrol etmek için kullanılır.

İpucu: Varsayılan olarak, bir öğenin sol üst köşesine bir arka plan resmi yerleştirilir ve hem dikey hem de yatay olarak tekrarlanır.

<!DOCTYPE html>
<html lang="tr">
<head>
<title>CSS background-position Örneği</title>
<style type="text/css">  
    body {
        background-image: url("https://i.hizliresim.com/8ao71A.jpg");
        background-repeat: no-repeat;
        background-position: 10px top;
    }
    h1, p {
        margin-left: 150px;
    }
</style>
</head>
<body>
    <h1>Merhaba Dünya</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	</p>
</body>
</html>

Aşağıdaki örnekte, arka plan görüntüsü sağ üst köşeye yerleştirilmiş ve görüntünün konumu background-positionözellik tarafından belirtilmiştir .

<!DOCTYPE html>
<html lang="tr">
<head>
<title>CSS background-position Örneği</title>
<style type="text/css">  
	body {
		background-image: url("https://i.hizliresim.com/8ao71A.jpg");
		background-repeat: no-repeat;
		background-position: 100% top;
	}
	h1, p {
        margin-right: 150px;
    }
</style>
</head>
<body>
	<h1>Merhaba Dünya</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	</p>
</body>
</html>

Arka Plan Kısayol Özelliği (background)

Yukarıdaki örneklerden görebileceğiniz gibi, arka planlar ile ilgilenirken dikkate alınması gereken birçok özellik vardır. Tüm bu özellikleri, kodu kısaltmak için tek bir özellikte belirtmek de mümkündür. Buna kestirme özellik denir.

<!DOCTYPE html>
<html lang="tr">
<head>
<title>CSS background Örneği</title>
<style type="text/css">  
	body {
		background: #f0e68c url("https://i.hizliresim.com/oXlRyk.png") no-repeat fixed 270px 25px;
	}
</style>
</head>
<body>
    <h1>Deneme Bir Başlık</h1>
    <p>Bu bir deneme paragraf yazısı.</p>
</body>
</html>

background özelliğini kullanırken, özellik değerlerinin sırası aşağıdaki örnek gibi olmalıdır.

background: color image repeat attachment position;

Yorum (0)

Hiç Bir Yorum Bulunamadı. İlk Yorumuz Siz Yapın :)

Yorum Yap