Arka Plana Resim Ekleme Css

Arka Plana Resim Ekleme CSS

Arka plana resim eklemek, web sayfanıza görsel ilgi ve derinlik katmanın harika bir yoludur. CSS kullanarak arka plana resim eklemek oldukça kolaydır.

1. Adım: Resminizi Seçin

İlk olarak, arka planınızda kullanmak istediğiniz resmi seçmeniz gerekir. Resminizin yüksek kalitede ve web sitenizin genel tasarımına uygun olduğundan emin olun.

2. Adım: Resminizi Web Sunucunuza Yükleyin

Resminizi seçtikten sonra, web sunucunuza yüklemeniz gerekir. Bunu, bir FTP istemcisi veya web hosting kontrol paneliniz aracılığıyla yapabilirsiniz.

3. Adım: CSS Kodunuzu Yazın

Resminizi web sunucunuza yükledikten sonra, CSS kodunuzu yazabilirsiniz. Arka plana resim eklemek için aşağıdaki CSS kodunu kullanabilirsiniz:

body {
background-image: url("resim_yolu");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

Bu kod, arka plana resminizi ekleyecek ve resmin tekrarlanmasını önleyecektir. Ayrıca, resmin sayfa ortasına yerleştirilmesini ve sayfanın tamamını kaplamasını sağlayacaktır.

4. Adım: CSS Kodunuzu HTML Belgenize Ekleyin

CSS kodunuzu yazdıktan sonra, HTML belgenize eklemeniz gerekir. Bunu, <head> etiketleri arasına aşağıdaki kodu ekleyerek yapabilirsiniz:

“`

“`

5. Adım: HTML Belgenizi Kaydedin ve Tarayıcınızda Açın

HTML belgenizi kaydettikten sonra, tarayıcınızda açabilirsiniz. Arka plan resminizin doğru şekilde görüntülendiğini kontrol edin.

İpuçları

  • Arka plan resminizin boyutunu dikkatlice seçin. Çok büyük bir resim, web sayfanızın yüklenmesini yavaşlatabilir.
  • Arka plan resminizin kalitesine dikkat edin. Düşük kaliteli bir resim, web sayfanızın görünümünü olumsuz etkileyebilir.
  • Arka plan resminizin web sitenizin genel tasarımına uygun olduğundan emin olun.
  • Arka plan resminizin tekrarlanmasını önlemek için background-repeat: no-repeat özelliğini kullanın.
  • Arka plan resminizin sayfa ortasına yerleştirilmesini sağlamak için background-position: center center özelliğini kullanın.
  • Arka plan resminizin sayfanın tamamını kaplamasını sağlamak için background-size: cover özelliğini kullanın.

Faydalı Siteler

İlgili Dosyalar

Yayımlandı

kategorisi