• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z background-image - CSS

VPS Starter Arubacloud
0 głosów
455 wizyt
pytanie zadane 13 czerwca 2022 w HTML i CSS przez zbiku25 Bywalec (2,940 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

+2 głosów
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 Bywalec (2,940 p.)
i dokładnie takie jest rozwiązanie! Dziękuję.
0 głosów
odpowiedź 13 czerwca 2022 przez zbiku25 Bywalec (2,940 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 Bywalec (2,940 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 (251,210 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;
}

wink

#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 ]

0 głosów
odpowiedź 13 czerwca 2022 przez andrzejt17 Użytkownik (680 p.)
Czyli prawdopodobnie przeglądarka ma nieaktualną wersję pliku css. Naciśnij 'odśwież' trzymając lewy shift.

Również, zapewne otwierając w innej przeglądarce, w której nie uruchamiałeś jeszcze strony będzie działać poprawnie :)
0 głosów
odpowiedź 13 czerwca 2022 przez AnimaVillis Stary wyjadacz (11,190 p.)
Możesz jeszcze spróbować sobie kliknąć prawym "zbadaj" i sprawdzić czy wczytane przez css'a ścieżki są prawidłowe :)

Podobne pytania

+1 głos
1 odpowiedź 292 wizyt
pytanie zadane 29 maja 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)
+1 głos
2 odpowiedzi 248 wizyt
pytanie zadane 15 kwietnia 2021 w HTML i CSS przez Kubs Mądrala (5,190 p.)
0 głosów
2 odpowiedzi 168 wizyt
pytanie zadane 9 września 2015 w HTML i CSS przez w33 Nowicjusz (160 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...