İce Tea - Resmin Uzerine Yazi Yazma

Merhaba arkadaşlar, bir anlatımım ile daha birlikteyiz.
Bu dersimde sizlere css ile resimin üzerine yazı yazmayı çok kolay bir şekilde anlatacağım.
İlk olarak bir resim seçelim... Bu seçeceğimiz resim sadece bir ayrıntıdır, ister bir ünlünün ister bir hayvanın resimini veya kendi resiminizi vs.. koyabilirsiniz.
Ben önceden belirledim Mustafa Kemal Atatürk'ün resimini koyacağım.

Örnek: Tıkla

Şimdi kod yazmaya hazır olun kafanızı toparlayın.
Oluşturacağımız css'in konusuna özel bir css oluşturucaz. yani şu şekil ;

#ataturk {
}

Yeşil ile belirttiğim oluşturduğumuz div'in css kodudur.
Bu css kodunun içine şimdi arka plan kodunu size yazıyorum.

background-image: url (buraya resim urlsini yapıştırın.);

Ve resimin genişliğini ve yükseklik için gereken kodu yazıyoruz.

width: 500px;
height: 354px;

Birde son olarak kodun gözükmemesi için div için gerekli kodu yazalım...

<div id="Div ismi buraya">Buraya yazı geliyor..!</div>

Evet arkadaşlar yukarıda kırmızı ile belirttiğim yere yazdığımız css'in adı gelicek bizim yazdığımızın css'in adı ataturk ü yerine u yazmaya dikkat edin yoksa sorun çıkar.
Mavi ile belirttiğim ise resimin üstüne yazılacak yazıdır.

Oluşturduğumuz kod ;

Kod:

#ataturk {
background-image: url(https://img.webme.com/pic/m/manshess/ataturk.jpg);
height: 354px;
width: 500px;
}

<div id="ataturk">Content for id "ataturk" Goes Here</div>

Bu kısım css kısımına ;

Kod:

#ataturk {
background-image: url(https://img.webme.com/pic/m/manshess/ataturk.jpg);
height: 354px;
width: 500px;
}

Bu kısım istediğiniz her hangi bir sayfaya eklenecektir ;

Kod:

<div id="ataturk">Content for id "ataturk" Goes Here</div>

Eğer ben böyle uğraşamam direk sayfaya koymak istiyorum derseniz hemen bir aşağıdaki kodu istediğiniz sayfaya ekleyebilirsiniz. ;

Kod:

Eğer bir sorun olursa başlığın altına bildirin nerede hata yaptıysanız onu çözmeye çalışırız. Cool

ANLATIM : BY PROFESÖR