Mam zdjęcie (które ma być headerem jak w projekcie zdjecia na samym dole tego posta - oryginalne wymiary zdjecia to 1500px x 354px):
chcę żeby to zdjęcie było **1.**wstawione za pomocą właściwości background-image 2 żeby było bezpośrednim potomkiem <body> (body ma widht:1000px i height 1230px) 3. żeby height i width skalowały się proporcjonalnie wraz ze zmianą wielości okna przeglądarki. Kod poniżej stworzony przeze mnie niby działa bo efektem tego kodu jest to co widać na samym dole jakoś działa :P pytanie jak bez określonego width to działa :P (to zdjecie wstawiłem do tagu <section>) ale pytanie czy jest prawidłowy:
section.super {
position:relative;
padding-top:11.8%;
padding-bottom:11.8%;
background: url(header.jpg);
background-size:100% 100%;
margin: 3% auto 0;
}
jeśli zrobię dla tego zdjęcia (bedącego bezpośrednim potomkiem <body>) width:100% (bedzie miało wtedy 1000px) i height:19.19% to wówczas to height nie zadziała tzn. zdjecie w ogóle się nie pokaże na stronie. Moim celem jest robienie layoutów wstawiając zdjęcia za pomocą tej właściwości background-image które to zdjęcia będą bezpośrednim potomkiem <body>. Rzecz w tym, że przy background-image bedacym bezposrednim potomkiem <body> %(procentowe)height nie działa z kolei jesli do jakiegos group content tagu np: <section> albo <article> wstawię div to w tym divie width i height bez problemu zadziała bo bedzie względem <section> lub <article> a gdyby byly względem <body> to height nie zadziała. Względem <body> dopiero jakieś paddingi jak się wstawi to zadziała. Nie mam pojęcia dlaczego tak jest.
