HTML Dersleri 13 - Background

Bu derste HTML sayfalarında arka plan rengi ve arka plan görsellerinin nasıl kullanıldığını öğreneceksin. Sayfa geneli ve belirli alanlar için background uygulamaları, örnek HTML kodlarıyla birlikte detaylı olarak anlatılmaktadır.

admin admin
Ekim 13, 2022 - 12:39 Updated: Ocak 8, 2026 - 23:09
0 103
HTML Dersleri 13 - Background
HTML Dersleri 13 - Background

HTML Background Nedir?

HTML background, bir web sayfasının veya sayfa içindeki belirli alanların arka plan rengini ya da arka plan görselini belirlemek için kullanılan yapıdır. HTML arka plan kullanımı, sayfanın görsel bütünlüğünü artırır ve kullanıcı deneyimini iyileştirir.

Sayfa Arka Plan Rengi Verme

Bir web sayfasının tamamına arka plan rengi vermek için body etiketi kullanılır.

Örnek Kullanım

<!DOCTYPE html>
<html>
<head>
    <title>HTML Background</title>
</head>
<body style="background-color: #f2f2f2;">

    <h1>HTML Background Kullanımı</h1>
    <p>Bu sayfanın arka plan rengi açık gridir.</p>

</body>
</html>

Belirli Bir Alana Arka Plan Rengi Verme

Sadece belirli HTML elementlerine arka plan rengi vermek mümkündür.

Div İçin Background Örneği

<div style="background-color: lightblue;">
    <h2>Başlık Alanı</h2>
    <p>Bu alanın arka plan rengi mavidir.</p>
</div>

Arka Plan Görseli Kullanma

HTML sayfalarında arka plan görseli kullanarak daha etkileyici tasarımlar oluşturulabilir.

Arka Plan Resmi Ekleme

<body style="background-image: url('bg.jpg');">

Arka Plan Görselinin Tekrarını Kontrol Etme

Varsayılan olarak arka plan görselleri tekrar eder.

Tekrarı Kapatma

<body style="
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
">

Arka Plan Görselini Ortalama

Arka plan görselinin konumu ayarlanabilir.

Ortalanmış Background

<body style="
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
">

Arka Plan Görselini Sabitleme

Sayfa kaydırıldığında arka planın sabit kalması sağlanabilir.

Sabit Arka Plan Örneği

<body style="
    background-image: url('bg.jpg');
    background-attachment: fixed;
">

Arka Plan Özelliklerini Birlikte Kullanma

Birden fazla background özelliği tek satırda veya birlikte kullanılabilir.

Kombine Kullanım

<body style="
    background-color: #ffffff;
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
">

HTML Background Kullanımında Dikkat Edilmesi Gerekenler

  • Arka plan yazıyı gölgelememeli

  • Okunabilirlik korunmalı

  • Büyük boyutlu görsellerden kaçınılmalı

  • Mobil uyumluluk dikkate alınmalı

Bir sonraki derste HTML sayfalarında renklerin nasıl kullanıldığını ve renk kodlarının nasıl çalıştığını öğreneceğiz.

? HTML Dersleri 14 – Renkler
https://cilginyazilim.com/html-dersleri-14-renkler

Etiketler: