dareksbs
27.10.2012, 11:11:03
Witam,
trochę posiadziałem, poszukałem i nic ciekawego nie znalazłem, a konkretniej chcę stworzyć layout strony która będzie miała w tle obrazek, ale taki który się nie będzie powtarzał a będzie się dopasowywał do okna przeglądarki. Oczywiście wiem, aby użyć w CSS przykładowo funkcje no-repeat i rozmiar 100% ale tu nie oto chodzi, tzn. jeśli zastosuje rozmiar 100% to tło się będzie zmniejszało i powiększało, ale wszystkie dodatkowe rzeczy w stronie nie !
na stronie chcę zamieścić jeszcze chmurkę w lewym górnym (oczywiście w osobnym divie) oraz pole z tekstem na środku strony.
Teraz pytanie do was, jaki sposób będzie najlepszy aby coś takiego osiągnąć (pisałem dużo kodu pod szablon, ale jeszcze nigdy nie robiłem go ze zdjęciem na całą stronę)
Z góry dziękuje i pozdrawiam
d3ut3r
27.10.2012, 11:35:47
http://www.w3schools.com/cssref/pr_background-attachment.asp Możesz ustawić fixed wówczas obrazek nie będzie się poruszał podczas przewijania. O ile dobrze zrozumiałem twój problem.
dareksbs
27.10.2012, 11:44:59
tylko jak użyje tego kodu :
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
na obrazku który ma wymiary 4000 na 3000 to widzę tylko górę obrazka

chodzi mi o rozwiązanie które by wypełniło całą strone tym obrazkiem.
d3ut3r
27.10.2012, 11:50:29
css3 ma coś takiego jak backround-size, innym sposobem jest pobieranie rozmiarów okna użytkownika za pomocą JavaScript i generowanie odpowiednio wyskalowanego obrazu w locie lub przygotowanie kilku wersji w różnych rozmiarach.
acidm
9.11.2012, 23:31:13
backround-size nie zadziała w niestety w ie poniżej 9 wersji,ale można dodac tlo jako <img > do body nalepiej na poczatku i tak ostylowac :
#naszObrazek {
height: 100%;
width: 100%;
position: fixed;
margin: 0px;
padding: 0px;
z-index: -1;
left: 0px;
top: 0px;
display: block;
background-repeat: no-repeat;
}
body {
margin: 0px;
padding: 0px;
}
W ten sposób nie musimy angażowac js