1. Ana Sayfa
  2. Resim Yükle
  3. HTML’de Arka Plan Resmi Nasıl Eklenir?3 Kolay Adım
Trendlerdeki Yazı

HTML’de Arka Plan Resmi Nasıl Eklenir?3 Kolay Adım

HTML’de Arka Plan Resmi Nasıl Eklenir?2021

HTML’de Arka Plan Resmi Nasıl Eklenir? Sorusunun cevabını detayları ile sizlere aktaracağız. Bir resmi sayfaya eklemek yerine bir web sayfasının veya bir HTML öğesinin arka planı olarak ayarlamak isterseniz, CSS background-image özelliğini kullanmanız gerekir. Bu CSS özelliği , HTML’nin önceki sürümlerinde arka plan resmi niteliğinin yerini aldığını söyleyebiliriz .  Bu yüzden background-image değerini ayarlamak için aşağıdaki dizinleri kullanmanız gerekir: url(‘ ‘); Tek tırnak işaretleri arasına resim URL’sini veya dosya yolunu koyacaksınız.

Bir Sayfaya Arka Plan Resmi Nasıl Eklenir?

HTML’de Arka Plan Resmi Nasıl Eklenir? Sorusunun cevabına başlamak için, tüm sayfanın arka planı olarak bir resim ayarlamak istediğinizi varsayalım. Bu durumda, gövde öğesine CSS uygularsınız . Bir CSS seçici kullanarak , HTML dosyanızın head bölümünde veya harici bir stil sayfasında arka plan görüntüsü özelliğini tanımlayabilirsiniz . Bu demo için, yukarıdakiyle aynı resmi kullanacağız ve görebilmemiz için metin rengini beyaza çevireceğiz.

İşte CSS:

body {
background-image: url(https://resimyukle.org/i/7kbSF.jpg’);
color: #FFFFFF;
}

İşte HTML:

HTML'de Arka Plan Resmi Nasıl Eklenir?
HTML’de Arka Plan Resmi Nasıl Eklenir?

<h2>Background Image</h2>
<p>The background image is specified in the body element.</p>

Eğer resim tarayıcıdan daha küçükse ne yapılır? Bu durumda yapılması gereken aşağıda gösterildiği gibi varsayılan olarak kendisini düzeltmektir.

Bunu önlemek için background-repeat özelliğini kullanabilirsiniz. Aynı zamanda ve no-repeat olarak ayarlayabilirsiniz.

İşte CSS şeklinde hazırlanan html:

body {
background-image: url(https://resimyukle.org/i/7kbSF][img.jpg’);
background-repeat: no-repeat;
color: #FFFFFF;
}

HTML aynı kalır. Ancak bu durumda görüntünün altında ve sağında boşluk oluştuğunu göreceksiniz. Arka plan görüntüsünün tüm gövde öğesini kapladığından ve tüm tarayıcı penceresini kapladığından – arka plan boyutu özelliğini kullanabilir ve arka planı kaplayacak şekilde ayarlayabilirsiniz. Daha sonrasında da görüntünün boyutlarının küçülmesinii önlemek için background-attachment özelliğini kullanın. Ayrıca  sabit olarak ayarlayın ki, görüntü orijinal boyutlarını korusun

İşte CSS:

body {
background-image: url(https://resimyukle.org/i/7kbSF.jpg’);
background-attachment: fixed;
background-size: cover;
color: #FFFFFF;
}

 

HTML’de Arka Plan Resmi Nasıl Eklenir?

Bir görüntüyü, tüm web sayfası yerine bir HTML öğesinin arka planı olarak da ayarlama şansınız bulunuyor.

Örnek vermek gerekirse: HTML öğelerini bir div içine yerleştirebilirsiniz. Daha sonra div’i yukarıda kullandığımız CSS özellikleriyle hedefleme yapabilirsiniz.

 

Sadece bir fark oluşur bu durumda, background-size özelliğini kapsayacak şekilde ayarlamak yerine, onu yüzde yüz olarak ayarlayacak olmamızdır . Bu yapılacak işlem görüntünün orijinal boyutlarını korumaya almadan tüm div öğesini sığdırmak için gerektiğinde yatay ve dikey olarak uzayacağı anlamına gelmektedir.

Örnek:

div {
background-image: url(https://resimyukle.org/i/7kbSF.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
color: #FFFFFF;
}

HTML’de Resim Bağlantısı Nasıl Yapılır?

Görüntüler de etkili bağlantılardır — bir simgeden veya yüksek çözünürlüklü bir görüntüden bağlantı oluşturabilirsiniz. Her iki durumda da süreç aynıdır: <img> öğenizi aşağıdaki gibi bir <a> etiketi içine alabilirsiniz.

<a href=”URL”>
<img src=”URL” alt=”descriptive text”/>
</a>

 

Web Sitenize HTML İle Görsel Eklemek

Web sitenize görsel eklemek hem ziyaretçi deneyiminiz hem de arama motorları için son derece önemlidir.  Eğer PHP yazılımında siteniz varsa resim eklemek hiçte zor değil. Resimyukle.org sitemiz üzerinden resim yükleyip anında HTML kodunu alıp sitenize ekleyebilirsiniz. Üstelik sitemiz üyeliksiz ve ücretsiz misafirlerine hizmet veriyor. HTML’de Arka Plan Resmi Nasıl Eklenir? noktasında tüm detayları sizlerle paylaştık.

 

 

Yorum Yap

Yorum Yap