Witam. Chciałbym użyć w tle strony pewną tapete, np. -> http://www.blackberry-themer.com/assets … 6_1926.png. Problem w tym, że zamiast ulokowania tego obrazu w tle strony na cały jej rozmiar, obrazek klonuje się na kilkadziesiąt kolejnych tworząc w ten sposób dane tło. Próbowałem uzyskać w css odpowiedni efekt, jednak gdy się to udało, obraz tła był w fatalnej jedności. Obrazki z dużą rozdzielczością także zawodzą. W jaki sposób to zmodyfikować?
A jakiej jakości się spodziewałeś, rozciągając taki mały obrazek na całą stronę? A co oznacza, ze obrazki z dużą rozdzielczością także zawodzą?
Może inaczej: chodzi mi o zdefiniowanie tła dla strony, przykładowo można to dostrzec obserwując tło kwejka. Wydaje się, że jest to jeden obrazek, jednak jego wymiary powinny być olbrzymie, a same pobranie tła zajęłoby kilka/kilkanaście minut.
Najprościej zrobić to tak:
body {
background: url('nazwa_obrazka.rozszerzenie') no-repeat fixed center;
background-size: 100% 100%;
}
Do tego jeszcze zastosować w miarę optymalny w rozmiarach i “fakturze” obrazek, bo chyba nie chcesz bawić się w ładowanie n-liczby obrazków względem “rozdzielczości ekranu”. Moim zdaniem to ostatnie jest robotą niewartą zachodu, ponieważ obrazków takich samych, w różnych rozdzielczościach byłoby zbyt wiele, do tego “masa” pisaniny, plus obciążanie niepotrzebnie serwera.
PS. Podany kod “zakotwiczy” obrazek tła, nie będzie się on poruszać wraz z zawartością strony.
PPS. Na kwejku jest zastosowana mała prostokątna grafika, która jest de facto klonowana, a Ty chyba nie chcesz klonować?
http://kwejk.pl/site_media/tlo.png?1321308433
Tak wygląda obrazek tła Kwejka. Jest on po prostu tak zrobiony, żeby przy jego klonowaniu nie było tego widać, ze jest powtarzany. Po prostu jest symetryczny Żeby taki “bajer” zrobić wystarczy nie dawać no-repeat w kodzie podanym przez manieKMP
@kubut, i dodatkowo nie dawać “background-size”, inaczej grafika będzie “naciągnięta” na stronę, jak skóra po liftingu
Faktycznie, przeoczyłem
Sposób zaprezentowany przez @manieKMP niemal całkowicie mnie zadowala, jednak jest jeden szkopuł - strona bardzo ‘muli’ przy przewijaniu jej zawartości. Myślałem, że jest to wina obrazka (2000x1300 i 250Kb) jednak zmniejszając go radykalnie (640x480 i 8Kb), nadal występuje ten problem.
Znalazłem w sieci kod:
background:#000 url(img/gray.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Jednak problem jest identyczny.
Powyższe w sumie nie różni się w działaniu od tego co podałem, ma jedynie zadeklarowane skalowanie obrazu dla starszych wersji przeglądarek (dla teraźniejszych wystarcza background-size bez prefiksu, a wartość cover można zamiennie wykorzystywać zamiast procentów). Jedynie IE czegoś takiego nie obsługuje i (jak zwykle) do niego trzeba byłoby jakiegoś fix’a wymyślić.
Sprawdziłem u siebie w “brudnopisie” to co podałem tutaj, na Fx, O, GC dev (dwie pierwsze to aktualne stabilne wydania, trzecia deweloperska, również aktualna) oraz na IE9 (tu bg-size nie działa) i na żadnej testowa strona nie miała “zmuł”, więc nie wiem co może być tego problemem u Ciebie, ale raczej nie podany kod - chyba że z czymś na stronie w jakiś konflikt wchodzi, albo jest to problem z przeglądarką, może przez włączoną sprzętową akcelerację, która u mnie jest wyłączona.
Te parametry wydawały mi się dość skomplikowane, ponieważ każdy z podanych wyświetlał inne ułożenie tła (jedno bardziej rozciągnięte, drugie mniej itd.). Zdecydowałem się na tło jednolite. Dziękuję za pomoc.