Automatyczny rozmiar obrazka

[lomek]

Witam mam taki oto problem. Strona ma zajmować całą szerokość i wysokość ekranu niezależnie od rozdzielczości. Więc mam ustawione wartości procentowe odpowiednio:

Kod PHP:

#header{width:100%;
height:10%;}
#content{width:100%;
height:80%;}
#foot{width:100%;
height:10%;} 


Wszystko fajnie się układa, ale jako tło contentu wybieram sobie zdjęcie. Jest ono duże ok. 1600px 900px; chce aby było widać je całe nie zależnie od rozmiaru ekranu, bo teraz zdjęcie nie jest skalowane i ucina mi np. istotne elemnty

[camelrafal]

możesz też dać do body ten background

Kod:

body{
background:url(obrazki/obrazek.jpg) center center no-repeat;
background-size:cover;/*jeżeli chcesz aby rozmiar obrazka zmieniał się sam*/
}

lub szerokość i wysokość na 100%

Kod:

body{
background:url(obrazki/obrazek.jpg) center center no-repeat;
background-size:100% 100%;/*rozciągnie się i zgubi proporcje*/
}

i raczej nie ustawiałbym wysokości nagłówka i stopki w procentach a raczej w stałych pikselach
-wysokość będzie się zmieniała w zależności od rozdzielczości np. raz będzie miała 100px a innym razem 120px czyli się rozjedzie - chyba że tak ma być

[lomek]

Kod:

#header,
#content,
[b]#foot [/b]{
min-width:1024px; /* zmień jak chcesz. Ja zawsze używam 1024px */
width:100% !important;
}
#header { height:10% !important;}
#footer {height:10% !important;}
#content {
background:url("katalog/obraz.rozszerzenie") /*bez powtarzania*/ no-repeat /* wyśrodkowanie w pionie i poziomie*/ center;
height:80% !important;
}

Hm mimo wszystko obrazek jest ucinany i z góry i z dołu czyli wyświetlany w pełnej krasie 1600x900

i raczej nie ustawiałbym wysokości nagłówka i stopki w procentach a raczej w stałych pikselach
-wysokość będzie się zmieniała w zależności od rozdzielczości np. raz będzie miała 100px a innym razem 120px czyli się rozjedzie - chyba że tak ma być

Tylko jak dam header na 50px; footer na 50px; a content? Jak dam 100% to już pojawia się pasek przewijania

[camelrafal]

podejewam że obrazek jest raczej ucinany z lewej i prawej a nie z góry i dołu
obrazek masz szeroki na 1600 a wysoki na 900
więc jeżeli ja mam monitor 1440x900 to nawet jak dam wysokość 900 to i tak boki mi obetnie
musisz sie zastanowić co chcesz zrobić z tym obrazkiem
jeżeli chcesz zeskalować to wystarczy że dodasz

Kod:

background-size:100% 100%;

Tylko jak dam header na 50px; footer na 50px; a content? Jak dam 100% to już pojawia się pasek przewijania

jak content wypełnisz czymś to automatycznie się rozszerzy nie musisz nadawać mu wysokości