CSS Background-image nie pojawia się

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

Witam,

Mam problem z dodaniem obrazka już na samym początku tworzenia strony. Strona umieszczona jest na serwerze XAMPP w katalogu htdocs. W tym katalogu widnieje katalog "Ogrodnik" wraz z plikiem index.html oraz style.css. Zdjęcia zdnajduje się w katalogu "Grafiki" w tymże katalogu. Przy próbie wstawienia zdjęcia poprzez background-image: url ("Grafiki/img.jpg"); zdjęcie nie wyświetla się. Mógłby ktoś podpowiedzieć w czym tkwi problem ?

Załączam kod:

CSS:

.wrapper
{
	width: 100%;
	height: 100%;
	background-image: url("Grafiki/img.JPG");
}

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Waclaw Hankus Ogrodnik</title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="css/fontello.css">
	<link href="https://fonts.googleapis.com/css?family=Lato:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
	<div class="wrapper">

	</div>	
</body>
</html>

1 odpowiedź

odpowiedź 31 grudnia 2018 przez Eimens Maniak (69,240 p.)
wybrane 31 grudnia 2018 przez Strugaczka

Najlepsza

height: 100%; ???

Złych jednostek użyłeś :) Ustaw testowo 400px i zobacz czy jest grafika. Korzystać ze "zbadaj element" i tam sprawdzaj.

Jak już zadziała to poczytaj o VH i VW :)

komentarz 31 grudnia 2018 przez Strugaczka Początkujący (260 p.)

Hmm ok zadziałało ale jak to zrobić żeby zdjęcie wypełniało całego diva ? I co to jest VH i VW ? Height i Width ale co to jest to V ?

komentarz 31 grudnia 2018 przez Eimens Maniak (69,240 p.)

http://webkod.pl/kurs-css/jednostki/relatywne/vw

Poczytaj trochę o tym :)

background-size o tym też poczytaj :)

Ogólnie zapoznaj się z podstawowymi właściwościami css.

komentarz 31 grudnia 2018 przez Strugaczka Początkujący (260 p.)

Ok działa wszystko ale mam pytanko ponieważ kiedy zdefiniowałem wysokość DIV'a na 500px obrazek zostaje ucięty w połowie wysokości. Jest możliwość dopasowania obrazka do szerokości i wysokości diva jednocześnie ? Zastosowałem już background-size: cover; ale to wypełniło diva tylko w szerokości.

komentarz 31 grudnia 2018 przez niezalogowany

background-size: szerokosc wysokosc;

komentarz 31 grudnia 2018 przez Eimens Maniak (69,240 p.)

@Strugaczka, COVER powinien działać prawidłowo

komentarz 31 grudnia 2018 przez Strugaczka Początkujący (260 p.)

Chodzi mi o to że diva ustawiam width: auto, height: 500px kiedy ustawiam background-size: cover zdjęcie wypełnia całego diva po szerokości ale nie po wysokości (zdjęcie zostaje ucięte na wysokości). Kolejne pytanie: czy żeby zdjęcie jako tło zmieniało się w zależności od wielkości okna należy zastosować bootstrapa ?