Problem z background-image - CSS

pytanie zadane 13 czerwca 2022 w HTML i CSS przez zbiku25 Gaduła (3,000 p.)

Cześć,

Nie potrafię zrozumieć dlaczego nie mogę wstawić zdjęcia jako tło diva. Ścieżka jest poprawna. Sprawdzałem również ustawiając dla tego diva zwykły kolor - yellow i działa. Ale zdjęcie nie chce się załadować :( Czy ktoś widzi jakiś błąd?

HTML

<body>
	<div id ="intro">
		<main>
			<header>
				<nav>
					<ul class="menu">
						<li>Strona Główna</li>
						<li>Wideo</li>
						<li>Galeria</li>
						<li>Oferta</li>
						<li>Kontakt</li>
					</ul>
				</nav>
			</header>
		</main>
	</div>	
</body>

CSS

body
{
	width: 100%;
	background-color: #1A1917;
	color: white;
	font-family: mukta;
	margin: 0;
}

#intro
{
	background-image: url('img/tlo.png');
	height: 1000px;
}


.menu
{
	list-style-type: none;
	text-align: right;
	margin-right: 80px;
}

.menu > li
{
	display: inline-block;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	margin: 0 30px 15px 15px;
}

komentarz 13 czerwca 2022 przez andrzejt17 Użytkownik (680 p.)

Jesteś absolutnie pewien, że ścieżka do obrazu z poziomu dokumentu jest prawidłowa?

Spróbuj w nowej karcie otworzyć ten obrazek. Jeśli masz gdzieś zahostowaną stronkę to sprawdzę od razu.

4 odpowiedzi

odpowiedź 15 czerwca 2022 przez pirouetti Mądrala (6,490 p.)
wybrane 16 czerwca 2022 przez zbiku25

Najlepsza

Skoro po wpisaniu tego kodu w pliku html (jak napisałeś w którymś komentarzu) działa, a ten sam kod nie działa w css, ścieżka do zdjęcia liczona od pliku css nie jest poprawna. Oznacza to najzwyczajniej w świecie, że najprawdopodobniej twój plik css znajduje się w folderze o nazwie zgaduje: css.

Czy nie tak?

Wtedy ścieżka do zdjęcia powinna wyglądać tak:

('../img/tlo.png')

1	komentarz 16 czerwca 2022 przez zbiku25 Gaduła (3,000 p.) i dokładnie takie jest rozwiązanie! Dziękuję.

odpowiedź 13 czerwca 2022 przez zbiku25 Gaduła (3,000 p.)

Hej,

Tak, jestem pewien co do ścieżki. Dla pewności wrzuciłem nawet w html na koniec kodu (przed </body>):

<img src="img/tlo.png" />

i zdjęcie normalnie się wyświetla...

Nie mam tego na hostingu, dopiero zacząłem pisać :)

Pozdrawiam

komentarz 13 czerwca 2022 przez andrzejt17 Użytkownik (680 p.)
edycja 13 czerwca 2022 przez andrzejt17

Wrzuciłem Twój kod do siebie

/
test.html
/img
tlo.png

Działa zupełnie OK. Zobacz czy konsola przeglądarki Ci nie krzyczy o jakimś błędzie.

komentarz 13 czerwca 2022 przez zbiku25 Gaduła (3,000 p.)

Dzięki za informację i zaangażowanie. Czyli kod jest ok. To już sam nie mam pojęcia co się dzieje :(

Co więcej, gdy w tło diva ustawię w html a nie CSS to wszystko działa dobrze...:

	<div id ="intro" style="background-image: url('img/tlo.png');">

komentarz 13 czerwca 2022 przez VBService Ekspert (256,600 p.)
edycja 13 czerwca 2022 przez VBService

Działa, Twój kod

#intro
{
    /* Dla testu */
    background-image: url('https://picsum.photos/1200/1300/?random=1');
    height: 1000px;
}

#intro
{
    background-image: url('https://picsum.photos/1200/1300/?random=1');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
}

[ background-image trick-css ]