Tło strony - problem z klonowaniem obrazu


(tndek) #1

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ć?


(kubut) #2

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ą?


(tndek) #3

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.


(manieKMP) #4

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ć?


(kubut) #5

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 :slight_smile: Żeby taki "bajer" zrobić wystarczy nie dawać no-repeat w kodzie podanym przez manieKMP


(manieKMP) #6

@kubut, i dodatkowo nie dawać "background-size", inaczej grafika będzie "naciągnięta" na stronę, jak skóra po liftingu :wink:


(kubut) #7

Faktycznie, przeoczyłem :wink:


(tndek) #8

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.


(manieKMP) #9

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.


(tndek) #10

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.