CSS: resim ekle - bu şekilde çalışır
Bu pratik ipucunda, CSS kullanarak nasıl görüntü ekleneceğini açıklıyoruz. Temel olarak, görüntüler buraya yalnızca arka plan görüntüleri şeklinde eklenebilir. Ancak, bu oldukça yeterlidir.
CSS'ye resim ekle
Örneğin, logonuz gibi CSS kullanarak başlığa bir resim eklemek istiyorsanız, # header altında aşağıdaki özellikleri bildirin:
- "background: url (image.webp) #FFFFFF;"
- Burada "bild.webp" resminizin URL'si css dosyasına göre veya sürücünüzde mutlak bir adres olarak anlaşılmaktadır.
- Renk ile web sitenizde arka plan rengini beyan edersiniz.
- Görüntü artık tam bir konum kullanılarak konumlandırılabilir, örneğin: "arka plan konumu: 100px 100px;" veya pencere kenarı tarafından belirlenen "arka plan konumu: sağ alt";
- Görüntünüzün kendini sürekli tekrarlamaması için, "background-repeat" özelliği altında bir "no-repeat" belirtebilirsiniz. Şöyle görünüyor: "background-repeat: no-repeat;".
- "Background-attachment" özelliği ile görüntünün kaydırma ile hareket edip etmeyeceğini veya sayfada sabit bir yerde kalıp kalmayacağını belirlersiniz: "background-attachment: fixed;".
- Özellikler, tırnak işaretleri olmadan CSS dosyasında belirtilir.
Bir sonraki pratik ipucunda, HTML kullanarak bir CSS dosyasının nasıl entegre edileceğini okuyun.