Bir web sitesinin arka planı, sitenin görünümü açısında çok önemlidir. Site için uygun renk veya resim seçilmelidir. Bu yazımızda HTML ile web sitelerinizin arka plan resim ve renk ekleme işlemlerini nasıl yapacağımızı öğreneceğiz.

Yukarıda da belirttiğimiz gibi, web sitelerimizin arka planına hem resim ekleyebiliyoruz, hem de rengini değiştirebiliyoruz. Bu işlemleri bir web sayfasının temel etiketlerinden biri olan <body> etiketine ekleyeceğimiz stiller ile yapabiliriz. Hemen nasıl yapacağımızı görelim.

HTML Arka Plan Resmi Ekleme

HTML arka plan resmi ekleme işlemlerini iki farklı şekilde yapabilirsiniz. Bunlar;

<html>
  <head>
    <style>
      body {
        background-image: url('resim.jpg');
      }
    </style>
  </head>
  <body>
    <h2>Arka Plan</h2>
  </body>
</html>

veya 

<html>
  <head>
    <style>
      body {
        background-image: url('resim-linki.html');
      }
    </style>
  </head>
  <body>
    <h2>Arka Plan</h2>
  </body>
</html>

Bu kodları yazdığınızda şöyle bir çıktı elde edeceksiniz;

Html Arka Plan Resmi Tekrar (Background Repeat)

Eklediğimiz resmin arka planda tekrar etmesini istemeyebiliriz. Bunu background-repeat: no-repeat; komutu ile yapabiliriz. Hemen görelim.

<html>
  <head>
    <style>
      body {
        background-image: url('resim.jpg');
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>Arka Plan</h2>
  </body>
</html>

Çıktısı;

Html Arka Plan Resmi Tam Ekran Yapma

Eklediğimiz arka plan resmi tam ekran yapmak istediğimizde background-repeat, background-attachment ve background-size komutlarını beraber kullanmamız gerekiyor. Hemen nasıl yapabileceğimizi görelim.

<html>
  <head>
    <style>
      body {
        background-image: url('resim.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>Arka Plan</h2>
  </body>
</html>

Çıktısı aşağıdaki gibi olacaktır;

Bu yazı dikkatini çekebilir.   HTML'de Açıklama Satırı (Yorum Satırı) Nasıl Yapılır ?

HTML ile Arka Plan Rengi Değiştirme

HTML arka plan rengi ekleme işlemlerini 3 farklı şekilde yapabilirsiniz. HTML arka plan renk kodları;

1. yol

<body bgcolor="#000000"> 
       Evrensel Kod
</body>

2. yol

<body bgcolor="rgb(0,0,0)"> 
       Evrensel Kod
</body>

3. yol

<body bgcolor="red"> 
       Evrensel Kod
</body>

Bu yazımızda HTML ile arka plan resim ve renk ekleme işlemlerini nasıl yaptığımız öğrendik. Diğer HTML derslerimizede görmek isterseniz buradan tümüne ulaşabilirsiniz.