Ustawienie tekstu na obrazku.

Question

Nie mam pomysłu jak umieścić treść h1 na obrazku. Kombinuję i kombinuję, ale cały czas pojawia się pod nim. Jest kilka takich div'ów-obrazków, które chciałbym umieścić pod sobą (zajmowałyby całą szerokość strony).

<div id="about"><img class="aboutPic" src="images/about.jpg" alt="Zdjęcie w tle" /><h1>O nas</h1></div>

 

Answer 1

Ustaw tło div#about w CSSsie jako zdjęcie - background-image MDN

Answer 2

Np. tak, czego nie polecam http://codepen.io/anon/pen/zqyRVM

 

Widzę, że w alcie dałeś "zdjęcie w tle", jeśli faktycznie ma być ono tłem dla tekstu to daj divowi #about 

background-image: url('sciezka_do_pliku');

 

Answer 3

Do zmiany kolejności warstw elementów możesz użyć index-z.

Comments

Jak już to z-index

Answer 4

Dobra, rozumiem. Ale jak potem dostosować wysokość i szerokość div'a do okna przeglądarki tak, żeby cały background-image był wyświetlony (dostosowany do szerokości okna)?

Comments

W tym celu używamy wyszukiwarki na forum:

http://forum.pasja-informatyki.pl/136777/obrazek-na-cala-rozdzielczosc-ekranu

Answer 5

<figure>
	<img src="http://example.net/images/obrazek.png" alt="Ważny obrazek">
	<figcaption>Bardzo ważny obrazek[…],który jest bardzo ważny</figcaption>
</figure>