HTML Harici CSS Dosyasına Arka Plan Resmi Ekleme
Bir web sayfasına arka plan resmi eklemek, görsel çekiciliği artırmak ve sitenin genel estetiğini geliştirmek için etkili bir yoldur. Arka plan resimleri, metin okunabilirliğini iyileştirmek, belirli bir ruh hali oluşturmak veya bir markanın kimliğini güçlendirmek için de kullanılabilir.
Bu makale, harici bir CSS dosyası kullanarak HTML’ye arka plan resmi eklemeyi adım adım açıklayacaktır.
Adım 1: Arka Plan Resmini Seçme
İlk adım, web siteniz için uygun bir arka plan resmi seçmektir. Resmin yüksek çözünürlüklü, sitenin genel tasarımına uygun ve dosya boyutunun makul olduğundan emin olun.
Adım 2: Resmi Web Sunucunuza Yükleme
Arka plan resminizi web sunucunuza yüklemeniz gerekir. Bu, FTP (Dosya Aktarım Protokolü) veya dosya yöneticisi gibi bir araç kullanılarak yapılabilir.
Adım 3: Harici CSS Dosyası Oluşturma
Bir metin düzenleyici kullanarak yeni bir harici CSS dosyası oluşturun. Dosyaya “.css” uzantısını verin. Örneğin, “background.css”.
Adım 4: CSS Kodunu Ekleme
Harici CSS dosyasına aşağıdaki kodu ekleyin:
css
body {
background-image: url("arka_plan_resmi.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
- background-image: Arka plan resminin URL’sini belirtir.
- background-repeat: Resmin nasıl tekrarlanacağını belirtir. “no-repeat” seçeneği, resmin yalnızca bir kez gösterileceğini belirtir.
- background-size: Resmin boyutunu belirtir. “cover” seçeneği, resmin tüm arka planı kaplayacak şekilde ölçeklenmesini sağlar.
- background-position: Resmin arka plan içindeki konumunu belirtir. “center” seçeneği, resmin arka planın ortasına yerleştirileceğini belirtir.
Adım 5: HTML Dosyasına Bağlantı Ekleme
HTML dosyanızın <head> bölümüne aşağıdaki kodu ekleyin:
html
<link rel="stylesheet" href="background.css">
Bu kod, HTML dosyanızı harici CSS dosyasına bağlayacaktır.
İpuçları
- Arka plan resminizin dosya boyutunu optimize edin. Büyük dosyalar sayfa yükleme sürelerini yavaşlatabilir.
- Arka plan resminin tüm ekran boyutlarında iyi göründüğünden emin olun.
- Arka plan resminin metin okunabilirliğini engellemediğinden emin olun.
- Farklı sayfalar için farklı arka plan resimleri kullanarak sitenize çeşitlilik katın.