Tło obrazu odcięte poza rzutni

URL dla niesfornych stronie: http://chrism.se Tło obrazu odcięte poza rzutni

Po kładziemy go na żywo odkryliśmy, że jeśli rzutnia jest zbyt mały w stosunku do treści, tak aby wymagają przewijania, obraz tła (blisko ciała tag, repeat-x) nie wykracza poza początkowy widok, ale nie mogę do końca życia zrozumieć, dlaczego i jak to naprawić. Należy pamiętać, że nie koduję strony samodzielnie, ponieważ nie jestem doświadczonym Javascriptem, a projektanci chcieli pewnych efektów. Mój starszy kolega z pewnością znalazłby lekarstwo, ale niestety jest nieobecny i chciałbym to podsumować.

Stan html i css jest taki sam, jak w przypadku, gdy dowiedziałem się o problemie, ale wypróbowałem sugestie, które widziałem w podobnych pytaniach, głównie dotyczące minimalnej szerokości. Naprawdę nie rozumiem różnicy między background is only as wide as viewport? i mój problem?

Full view = i.imgur.com/6aDpN.jpg

Problem = i.imgur.com/X6JVp.jpg

Źródło

2011-01-24 Cederfjard

czuję się w obowiązku podkreślić, że ktokolwiek to zrobił witryna nie myślał dużo o rozdzielczościach ekranu. Otrzymasz poziomy pasek przewijania w "1280x1024". Powinien zostać zaprojektowany, aby pasował do tej szerokości. Zajrzyj na stronę http://browsersize.googlelabs.com/, aby pomóc zrozumieć, co mówię. – thirtydot

Tak, jestem z tobą tam. Ale nie o to chodzi. – Cederfjard

Patrzę na twój problem.Trudno to naprawić, ponieważ projektant po prostu nie myślał o tego typu problemach. Mógłbym (i mam nadzieję), że się mylę, ale wygląda na to, że jedynym sposobem rozwiązania tego problemu jest zmiana * wielu * rzeczy w pobliżu. "Problem" to '#bodybodyurrent, #bodyNext {width: 100%}' (kończy się jako '100%' widoczności) - ale pozbycie się tego wprowadza gorsze problemy, które musisz wtedy naprawić. – thirtydot

najbliższa rzecz do roztworu roboczego mogłem znaleźć było od #bodyCurrent, #bodyNext:

Usuń right: 0.
Dodaj min-width: 1349px.

Szukasz ponownie, może to wystarczy.

Testowany tylko w Firefoksie przy użyciu Firebug.

Źródło

2011-01-24 14:25:55 thirtydot

To z pewnością zadziała! Pozdrawiam, dziękuję za pomoc – Cederfjard

Dodaj to do tła div#wrapper:

background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;

Źródło

2011-01-24 13:32:23 Nasir

jest obraz w tle innego DIV, który jest zbyt krótki w wysokości – Nasir

Dziękujemy za twój wkład. Nie jest to dla mnie idealne, ponieważ nie powinno być statyczne. Nie zajmuje się również luką poniżej stopki. – Cederfjard

IE nie obsługuje min-width, dzięki czemu można użyć wyrażenia, aby zrobić to samo:

body { 
    /* fix for most browsers, fill in desired width */ 
    min-width: 1000; 

    /* IE Version, fill in desired width equal to the min-width, second value with 2px less */ 
    width:expression(document.body.clientWidth < 1000 ? "998px" : "auto"); 
}

Źródło

2011-05-31 15:57:19

Pozdrowienia za napiwek! – Cederfjard

zdaję sobie sprawę, że jestem sposób późno do partii, ale wpadłem na ten sam problem i dodano min-szerokość do ciała, aby rozwiązać ten problem. Ponieważ podany link nadal ma ten problem, zakładam, że możesz potrzebować więcej porad. Minimalna szerokość korpusu powinna być co najmniej tak szeroka jak rzutnia, gdy pojawią się poziome paski przewijania.

Łatwiej jest zobaczyć, co się dzieje, jeśli powiększysz obszar wyświetlania do suwaków i skorzystasz z widoku 3D Firefoksa, aby wyświetlić stronę. Wtedy zobaczysz, że twój region-stopka jest ustawiony, aby przyjąć 100% szerokości elementu ciała i że tło działa dobrze; jednak sam korpus jest mniejszy niż przelew z górnej części strony, więc podczas przewijania uzyskujesz ten odcięty obszar. Dlatego spraw, aby element body miał szerokość min tak dużą, jak przelew z górnej części strony, a wszystko będzie gotowe. Jest to dość powszechny problem (nawet zauważyłem to na chwilę przez mailchimp).

Źródło

2012-05-18 15:42:46 TorranceScott

przetestowane w IE7:

html, body { 
    position:relative; 
    overflow:hidden; 
    margin:0 auto !important; 
}

Źródło

2012-06-26 13:08:31 Davis

Tło obrazu odcięte poza rzutni

Odpowiedz

Powiązane problemy