Wątek przeniesiony 2015-11-15 15:18 z Webmastering przez dzek69.

Właściwość background nie działa w wyniku czego nie pokazuje całego <section>

0

Zdjęcie z tagu <section> nie pokazuje mi się na stronie - zastanawiam się dlaczego. Co jest złego w tym kodzie, że nie działa? 1wsza część to html, druga część to css.

HTML:

<!doctype html>
<html lang="pl">
<title>Strona</title>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" media="screen,projection">
</head>
<body>
<section>
</section>
</body>
</html>

CSS:

html {
 width:100%;
 height:1230px;
}
body {
	width:90%
	height:100%;
}
section {
	width:100%;
	height:19.19%;
	background:url(header.jpg);
	background-size:100% 100%;
	background-repeat:no-repeat;
}

Chodzi o to zdjęcie:
header.jpg

0

A co to za śmieszny atrybut screen o wartości media (i projection)?

Poza tym KAŻDA przeglądarka ma narzędzia deweloperskie. Tam wszystko zobaczysz jak na dłoni.

0

Ja właśnie widziałem w narzędziach deweloperskich. Tylko nie wiem dlaczego tak się dzieje, że ten height ma 0.

0

ok pojawiło mi się zdjecie, jeszcze fajnie by było żeby height skalowało się wraz ze zmianą szerokości okna przeglądarki bo teraz szerokość się zmniejsza a wysokość pozostaje taka sama co deformuje zdjęcie:

deformacja.jpg

0

Jak określasz rozmiar tła jako 100% 100% to dostajesz wynik taki a nie inny.
Poczytaj sobie:
https://developer.mozilla.org/pl/docs/Web/CSS/background-size
Poczytaj sobie tez o jednostkach (w szczególności vh) - nie będziesz wtedy musiał określać na sztywno wysokości body (bo to bezsens):
http://mdn.beonex.com/en/CSS/length.html

Tu masz przykład użycia:
http://jsfiddle.net/kapitalny/zq01odsf/

0

U mnie ten kod zadziałał, że wszystko się skaluje ok:

html {
 width:100%;
 height:1230px;
}
body {
	width:90%;
	max-width:1000px;
	height:100%;
	margin: 0 auto;
}
section {
	width:100%;
	height:19.19%;
	background:url(header.jpg);
	background-size:contain; (tutaj jeszcze zadziała background-size:100% auto;
	background-repeat:no-repeat;
	margin: 3% auto 0;
}

Natomiast w tym przykładzie http://jsfiddle.net/kapitalny/zq01odsf/ przy zmianie szerokości przeglądarki dolna część obrazu (głowy mario brothers) się pojawiają i to te vh wprowadza zamęt. Nie chodzi mi o to żeby część obrazu się chowała albo pojawiała przy skalowaniu.

Też twierdzisz, że określanie na sztywno wysokości <body> to bezsens, zastanawiam się dla takiego elementu <section> jeśli będę nadawać wymiary height:50% to względem czego te 50% będzie jeśli w body nie będzie na sztywno podana wysokość.

Nie mam pretensji tylko staram się zrozumieć.

0

Nie powiedziałbym, że twój kod działa - jak ustawiasz wysokość nagłówka w zależności od wysokości okna, to zobacz co przy takim skalowaniu tła dzieje się z przestrzenia pomiędzy nagłówkiem a kolejnym elementem (wstawiłem dla przykładu akapit z tekstem):
http://jsfiddle.net/usu83709/
Robi się przepaść.

Zastanów sie jaki w ogóle efekt chcesz uzyskać.

Btw nie wiem w jaki sposób vh miałoby wprowadzić zamęt - vh określa tylko wymiar, nic innego.

Poza tym twój przykład mimo, iż używa procentów to i tak ustawia wysokość section na sztywno (bo te % są względem elementu o stałych wymiarach), równie dobrze możesz po prostu zrobić tak (i nadal jest tak samo dobrze / źle):
http://jsfiddle.net/qwr0f361/

A czemu podawanie wysokości w % jest złe? Bo jest nadmiarowe i zaciemniające kod, a w Twoim przykładzie dodatkowo powoduje pojawianie się paska przewijania, mimo, że treść nie zajmuje całej strony.

Chyba prościej zamiast:

html, body {
    height: 100%;
}
div {
    background-color: skyblue;
    height: 20%;
}

napisać:

div {
    background-color: skyblue;
    height: 20vh;
}

Zmieniasz wtedy tylko element, który tego wymaga.

0

Może nieprecyzyjnie się wyrażałem na początku (bo zazwyczaj precyzuję w trakcie nie na początku) ale od samego początku
założenia tego tematu moim celem było żeby zdjęcie się skalowało proporcjonalnie właśnie tak jak pokazałeś w tym przykładzie w Twoim ostatnim poście:

http://jsfiddle.net/usu83709/3/ (jeszcze dodałem do niego border:1px solid black; zeby było widać co się dzieje)

Czyli jeszcze raz, moim celem jest żeby zdjęcie się skalowało IDENTYCZNIE jak w powyższym przykładzie (chodzi mi o skalowanie proporcjonalne) + tylko żeby ten border tak nie zakrajał na dole i jest na to lekarstwo ALE WŁAŚNIE nie wiem czy to nie jest zbyt szamańska metoda (chodzi, że zamiast width/height daję tylko paddingi) :

http://jsfiddle.net/usu83709/2/

Odnośnie vh - czyli twierdzisz, że obecnie przy tworzeniu stron w ogóle nie powinno się do tagów html i body wstawiać %? Brzmi jak
cicha rewolucja o której nikt nie wie, albo wszyscy wiedzą ale ja nie wiem. Albo część wie, część nie wszystkie kombinacje.

Mnie TYLKO interesuje jak konkretnie wykorzystać vh w tym przypadku http://jsfiddle.net/usu83709/2/ żeby uzyskać DOKŁADNIE ten
sam efekt który tam już jest. Tylko to mnie interesuje, TYLKO ten przykład. rozkinianie vh i jakie może mieć globalne zastosowania zostawię sobie na później.

0

Możesz też spróbować tak: http://jsfiddle.net/kapitalny/3vbd6vhy/

1 użytkowników online, w tym zalogowanych: 0, gości: 1