HTML Sayfanın arkaplanına resim ekleme


HTML sayfalarda arkaplan resmi nasıl eklenir sorusuna cevap vermeye çalışacağım.
Aşağıdaki görmüş olduğunuz kodlar sayesinde CSS kullanmadan body etiketi ile sayfanın arkaplanına resim ekleyeceğiz.
 Kodlarda bulunan background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie5nRcJHRU3fwy6ziFWVAYXJjJEyNxDCTadP_J-WqZasbN_doRg5AabDybECXVX4KE9AzmWSub7pc6Ii4AuX0u3cdU-VY4BezoAfRiU62uS1Cr5NGsLq2m1Oll6ZKDFm8qI4bPOENIdYQl/s900/background.png"  bölümündeki resim dosyası sayfamızın arkaplan resmidir.Bunu istediğiniz resim ile değiştirerek sayfanızın arkaplanını değiştirebilirsiniz.
<!DOCTYPE html>
<html>
<body background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie5nRcJHRU3fwy6ziFWVAYXJjJEyNxDCTadP_J-WqZasbN_doRg5AabDybECXVX4KE9AzmWSub7pc6Ii4AuX0u3cdU-VY4BezoAfRiU62uS1Cr5NGsLq2m1Oll6ZKDFm8qI4bPOENIdYQl/s900/background.png">
<h1>Merhaba Dünya!</h1>
<p><a href="http://yeniwebmaster.blogspot.com">YeniWebmaster.Blogspot.com</a></p>
<p>Html'de arkaplan resim değiştirme denemesidir.</p>
</body>
</html>

Yer: Türkiye

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML içinde görünmeyen yazı

Resim
HTML sayfa içinde görünmesini istemediğimiz,kod açıklaması vb. sebebler için kullandığımız yazıları nasıl saklarız onu paylaşıyorum.   <!-- Gizli yazı --> şeklinde eklenen içerikler gizli olur sayfada görünmez. Örnek: <!--Buraya yazılan yazılar sayfada görünmez <a href="http://yeniwebmaster.blogspot.com/">Webmaster Blog</a>  -->
Devamı

Mouse ile üzerine gelince değişen resim | HTML + CSS

Merhaba arkadaşlar.Uzun bir aradan sonra yeni bir paylaşım yapıyorum.Basit ama web sayfanizda kullanınca göze güzel görünecek bir özellikten bahsedeceğim.Özelliğimiz; Mouse ile resim üzerine gelince değişip üzerinden çekince eski haline gelen resimler. Bu özelliği menülerde,butonlarda yada resim paylaşımlarında kullanabilirsiniz. Hemen kodları deneyelim.Masaüstünüze index.html,resim1.jpg,resim2.jpg dosyaları ekleyin.Ardından not defteri ile index.html dosyasını açıp içine aşağıdaki kodları ekleyip kaydedelim. <html> <style> #degisenresim {     height: 70px;     width: 120px;     background-image: url('resim1.jpg'); } #degisenresim:hover {     background-image: url('resim2.jpg'); } </style> <img id="Library"> </html> Kodları kaydettikten sonra index.html dosyasını tarayıcı ile açtığınızda sayfada resim1.jpg'yi göreceksiniz üzerine mouse götürdüğünüzde resim1 kaybolacak yerine resim2.jpg görünecektir tekrar m
Devamı

Otomatik arka plan rengini değiştirme (Javascript & HTML)

Merhaba arkadaşlar.Bu konumuzda siteniz için otomatik olarak değişen site arka plan rengi nasıl yapılır onu göstereceğiz. Aşağıdaki javascript fonksiyon ile css ye komut vererek otomatik olarak sayfanin renk değiştirmesini sağlıyoruz.Süre ayarını kodların içindeki 5000 yazan kısmı değiştirerek yapabilirsiniz.5000=5 saniye. Kodları çalıştırmadım ama çalışıyor olması gerekiyor sorun yaşayanlar yorum yaparsa yardımcı olmaya çalışırım.İyi çalışmalar. <html> <head> <style> body { background: blue; /* initial color */ transition: background .5s; /* .5s how long transition should take */ } </style> <script> var colors = ['green', 'orange', 'blue']; var active = 0; setInterval(function(){ document.querySelector('body').style.background = colors[active]; active++; if (active == colors.length) active = 0; }, 5000);</script> </head> <body> </body> </html>
Devamı