Brak obrazka, a prawidłowo podana ścieżka

Question

Witam.

Mam 2 obrazki: foto1 + foto2. Obrazek foto2 ma mniejszy rozmiar i ma sie pojawić w środku obrazka foto1 o większym rozmiarze.

Rozdzielczość foto1: 74x84

Rozdzielczość foto2: 64x48

<div class="image2">
	<img src="../../obrazki/foto2.png" />
</div>

.image2
{
	background: url("../obrazki/background/foto1.png");
	position: absolute;
	bottom: 2px;
	left: 2px;
	width: 64px;
	height: 48px;
	outline: 2px solid #000000;
}

Obrazek foto2.png jest wyświetlony, natomiast nie pojawił sie obrazek foto1.png. Do obu obrazków ścieżki są podane prawidłowo na 100%.

Co należy poprawić w kodzie, aby pojawił sie obrazek foto1.png?

Answer 1

::after , ::before 

przykład

Comments

Właśnie o takie coś mi chodzi. Plusem jest to, że nie trzeba nakładać obrazka na obrazek przy pomocy jakiegoś programu graficznego, tylko można to też zrobić w HTML + CSS.

Ogólnie jest dobrze.

A da się tak zrobić, aby nałożony obrazek pojawił się na środku (wyśrodkowanie) pierwszego obrazka?

Jeżeli nie, to pozostaje jedynie zabawa w pozycjonowaniu top + left.

Answer 2

Może kolejność obrazków jest zła i mniejszy ładuje pod większym? Lub trzeba ustawić priorytet wyświetlania obrazków lub coś podobnego.

Comments

Tyle to i ja wiem. Chodzi mi o skuteczną radę.

---

Witam. To była dobra rada. poczytaj o pozycjonowaniu w css.

przykład

---

OK, dzięki.