CSS: липсва фон при хоризонтално превъртане

Добре, имам фонове, настроени така:

HTML

<div id="container">
    <div id="content">
    CONTENT HERE
    </div>
</div>

CSS

#container
{
    background:url(image.gif);
}
#content
{
    width:800px;
    margin:auto;
}

Така че идеята е съдържанието да бъде в рамките на поле от 800px, докато фонът за съдържанието обхваща 100%, имам същата настройка за различни области като горния колонтитул, долния колонтитул и основните части на страницата. Така че всички те имат различен фон, обхващащ 100%, докато цялото съдържание е в рамките на кутия от 800px.

Всичко това работи добре, докато не направите прозореца достатъчно малък, за да показва хоризонтална лента за превъртане, тогава, когато превъртате хоризонтално, разкритата част вече няма фон, но ако направите страницата по-широка, тогава фонът ИМА.

Можете да го видите тук: Clicky

Има ли начин това да се поправи?

Благодаря!!


css background
person JD Isaacks    schedule 11.03.2010    source източник

Отговори (2)


arrow_upward
0
arrow_downward

Тъй като използвате област със съдържание с фиксирана ширина, защо не дадете и на вашия #container (всъщност #inner_content_container на вашия сайт) фиксирана ширина? Тъй като вашето изображение е широко 824px, току-що използвах FireBug, за да направя контейнера ви с тази ширина и проблемът ви изчезва.

ЗАБЕЛЕЖКА: Когато направите това, ще трябва да дадете на контейнера и автоматично поле и да зададете препълване на скрито, ако не искате ленти за превъртане.

#container {
  margin:auto;
  overflow:hidden;
  width:824px;
}
person Randy Simon    schedule 11.03.2010
comment
Това ще накара прозореца за изглед да е широк 824, за да не показва ленти за превъртане, искам хората с разделителна способност 600x800 все още да нямат хоризонтални ленти за превъртане, когато са максимизирани. Но вие ми дадохте идея, която го поправи, за горния и долния колонтитул зададох съдържанието да има същия фон като контейнера, а за основната секция просто го зададох да има бял фон. Това го оправи :) - person JD Isaacks; 11.03.2010
comment
Мисля, че бихте могли да използвате и overflow:hidden (актуализирах отговора си). Така или иначе, радвам се, че работи. - person Randy Simon; 11.03.2010

arrow_upward
0
arrow_downward

Благодаря, но връща име на файл с път, а не име на файл, например /download/10925221/11263992/1/mp4/39/71/1268527574311_583/03002001004B9B86E1927C01CCF99112E21A1F-E815-DA28-CB74-4CA53 6C67D87.mp4 вместо 03002001004B9B86E1927C01CCF99112E21A1F-E815-DA28-CB74 -4CA536C67D87.mp4
person JD Isaacks    schedule 11.03.2010
comment
@easwee не можеш да приемеш собствения си отговор, докато не изминат 2 дни, откакто си задал въпроса. Също така бих предпочел да маркирам отговора на някой друг, а не моя. Така че бих искал да дам на някого възможност или да даде по-добър отговор от моя, или да разшири моя отговор, за да мога вместо това да го маркирам. :) - person JD Isaacks; 11.03.2010