background-image nie działa, nie pokazuje się tło.

pytanie zadane 27 sierpnia 2018 w HTML i CSS przez Meffy Użytkownik (730 p.)

Witam

Mam problem z wstawieniem tła na stronie przy użyciu CSS. Przejrzałem wszystko 10 razy, głowie się na różne sposoby, i nie mam zielonego pojęcia co jest nie tak, próbując na różne wzory czy metody.A że jestem jeszcze początkujący a nawet jeszcze nie, po dopiero po jednej książce, to zwracam się do was.

Mój kod CSS wygląda tak

body {
background-image: url("images/cegla.jpg");
}

Zaś HTML

<!DOCTYPE html>
<html>
<head>
	<title>TheGames</title>
	<link href="css/styl.css" type="text/css"
		rel="stylesheet">
	<img src="images/logotyp.png" class="logotyp" alt="Logo" />
	


<body>


</body>
</head>
</html>

A tak wyglądają foldery w których znajduje się zawartość

Bardzo prosiłbym o pomoc/ wyjaśnienie, chciałbym zrozumieć gdzie robię błąd i nie popełniać go więcej :)

komentarz 27 sierpnia 2018 przez niezalogowany

wyszła odp

3 odpowiedzi

odpowiedź 27 sierpnia 2018 przez Greeenone Pasjonat (16,100 p.)
edycja 27 sierpnia 2018 przez Greeenone

Musisz wyjść z folderu CSS. Twój plik znajduje się w folderze CSS. Podając ścieżkę images/cegla, twój plik CSS szuka w folderze którym się znajduję folderu images. Musisz "wyprowadzić" go z folderu CSS a następnie zaprowadzić do images. Do tego używa się dwóch kropek i / .

../ Cofnie do głównego folderu a następnie poprowadzi do folderu images

background-image: url("../images/cegla.jpg");

komentarz 27 sierpnia 2018 przez Meffy Użytkownik (730 p.)

Ooooo, nigdy w życiu nie wpadłbym na to. Wszystko działa poprawnie :) Dziekuje bardzo za pomoc ;). Zapamiętam tą rade :)

komentarz 27 sierpnia 2018 przez pablop76 VIP (123,340 p.)

A dlaczego img jest w head?

Dlaczego plik startowy nie nazywa się index.html?

komentarz 27 sierpnia 2018 przez Meffy Użytkownik (730 p.)

No bo jak chce żeby img było głównym tłem to chyba powinno byc w head, no chyba ze sie myle. A musi sie nazywać index.html? Przecież to chyba można zmieniać i nie musi być pod nazwą "index"?. Nie wiem, nie znam sie jeszcze zbyt dobrze, jestem gorzej niż początkujący wiec każda rada mile widziana :)

komentarz 27 sierpnia 2018 przez pablop76 VIP (123,340 p.)

Mylisz się. Treść strony umieszcza się w body. Serwery skonfigurowane są tak, że szykają plików index i jeżeli nie ustawisz serwera innaczej plik startowy musi nazywać się index.

komentarz 27 sierpnia 2018 przez Greeenone Pasjonat (16,100 p.)
edycja 27 sierpnia 2018 przez Greeenone

Więc tak:
Plik index.html jest otwierany domyślnie przez przeglądarki. Jest to tak jakby twoja strona główna. Jeśli nie będziesz posiadał pliku index.html na swoim hostingu, pojawi Ci się lista plików a nie strona.

Co do tagu meta:

Tag meta zawiera w sobie różne informacje "techniczne" strony takie jak np. kodowanie znaków, słowa kluczowe, informacje o autorze, linki do czcionek, pliku z js, css itd. Zawierają jeszcze inne różne informacje jak opis który ma się pojawić w przeglądarkach, miniaturka strony. SEO itd.

Wszystko, co ma być wyświetlane na stronie powinno znajdować się w tagu body.

komentarz 27 sierpnia 2018 przez Meffy Użytkownik (730 p.)

Czyli rozumiem,że to co mam nazwane "TheGames.html" powinienem zmienić na index.html. I do różnych tagów powinienem dodawac mete?. Okej zrozumiałem. i przeniosłem juz z head do body. Jeszcze tak zapytam, czyli w head co ma sie znajdować? Głownie ścieżki do folderów?

komentarz 27 sierpnia 2018 przez pablop76 VIP (123,340 p.)

podstawowa struktura dokumentu html

komentarz 27 sierpnia 2018 przez Greeenone Pasjonat (16,100 p.)

Tak, musisz zmienić TheGamers.html na index.htm

W head z podstawowych "danych" znajduje się
Tytuł strony - Będzie on wyświetlany na otwartej karcie.

Autor strony

Opis - Opis który będzie widoczny w wyszukiwarkach

Słowa kluczowe - Słowa kluczowe dzięki którym łatwiej będzie odnaleźć twoją stronę

Kodowanie znaków - Jakie znaki są używane na stronie głownie to UTF-8, Kiedyś jak nie było takiego kodowania, pojawiały się krzaki.

Viewport - Skalowanie strony (Tyczy się to urządzeń mobilnych)

Link - Tutaj, żeby było jasne nie znajdują się linki do obrazków itd. Znajdują się w nim linki do plików które mają być załadowane wraz ze stroną jak plik JavaScript, CSS itd.

Miniaturka strony - Miniaturka, która jest wyświetlana gdy np. wysyłasz link na FB.

Czcionki - Link do czcionek które są hostowane i użyte na twojej stornie

Na razie tyle wystarczy. Reszta to są bardziej zaawansowane tagi (Chyba, że coś pominąłem)

komentarz 27 sierpnia 2018 przez Meffy Użytkownik (730 p.)

Okeeej, wielkie dzieki, za rade, dużo się dzięki dowiedziałem chociaż to mała kropla w oceanie w tym to co zawierają strony html i css :).

odpowiedź 27 sierpnia 2018 przez niezalogowany

bo nie masz zakończenia </head> przed <body> kolego

Struktura HTML to mniej więcej taka jest:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

zamknij head przed <body>

komentarz 27 sierpnia 2018 przez Meffy Użytkownik (730 p.)

Poprawiłem i wciąż to samo. Tło wciąż nie działa, jak trzeba moge załączyć skriny

odpowiedź 27 sierpnia 2018 przez Meffy Użytkownik (730 p.)

Podobne pytania

0 głosów

2 odpowiedzi 2,199 wizyt

Duże tło zdjęcia ( background-image) dopasowane do ekranu

pytanie zadane 7 stycznia 2017 w HTML i CSS przez lalanablanalala Bywalec (2,090 p.)

0 głosów

1 odpowiedź 713 wizyt

CSS Background-image nie pojawia się

pytanie zadane 31 grudnia 2018 w HTML i CSS przez Strugaczka Początkujący (260 p.)

0 głosów

2 odpowiedzi 1,194 wizyt

Jak ustawić background-image bez ustawiania wysokości zdjęcia?

pytanie zadane 23 lipca 2017 w Sieci komputerowe, internet przez The Real Slim Stefan Początkujący (450 p.)

background-image nie działa, nie pokazuje się tło.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci