Полноэкранный фон работает с липким нижним колонтитулом?

Я использую this tutorial для создания полноэкранного фона. (UPDATE: Используя высоту и ширину на 100% для изображения не то, что я хочу, как только растягивает изображение, этот сценарий сохраняет соотношение сторон.)Полноэкранный фон работает с липким нижним колонтитулом?

Я также пытаюсь включать липкий колонтитул с помощью this tutorial.

Добавление клейкой части нижнего колонтитула создает дополнительную горизонтальную прокрутку на фоновом изображении.

Мое изображение - 700px x 466px, а мое окно браузера - 1240 x 1414. Мой сайт находится в середине окна браузера по горизонтали, но есть лишний бит прокрутки, который можно сделать вправо.

Как получить фоновое изображение полного экрана, работающее с липким нижним колонтитулом, чтобы удалить дополнительную горизонтальную прокрутку? Липкий нижний колонтитул должен сидеть поверх фонового изображения не ниже него.

ОБНОВЛЕНИЕ: Используя ответ Supr для решения горизонтальной проблемы, остается только решить, что нижний колонтитул сидит ниже фонового изображения, а не поверх него.

Это мой CSS:

* { 
    margin:0; 
    } 

html, body { 
    height:100%; 
    } 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
    } 

.footer, .push { 
    height: 4em; 
    } 

.clear { 
    clear:both; 
    } 

body { 
    font-size: 62.5%; /* Resets 1em to 10px */ 
    background-repeat:repeat-x; 
    background-image: url('images/background-repeat.jpg'); 
    margin:0px; 
    } 

#body { 
    width:1000px; 
    margin:0 auto 0 auto; 
    }   

.fullBg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

#maincontent { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 50; 
}

Вот мой HTML:

<div class="wrapper"> 
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg" alt="" id="background"> 
    <div id="maincontent"> 
     <div id="body"></div> 

     <div class="push"></div> 
    </div> 

    <div id="footer"> 
     <p><a href="/home" title="Home">Home</a> | <a href="/about" title="About">About</a></p> 
    </div> 
</div>

источник

2012-02-02 Rob

пожалуйста, покажите нам эту страницу или добавить свой код. – Tim

@Tim Только что добавил код. – Rob

Добавление нижнего колонтитула вызывает горизонтальную прокрутку? Просто непроверенная идея, но попробуйте добавить

.wrapper { 
    overflow: hidden; 
}

и, возможно,

#footer { 
    overflow: hidden; 
}

в случае, если есть что-то (маржа/заполнение) перелив вне сноски.

источник

2012-02-02 11:39:52 Supr

Отлично, благодаря этому решается горизонтальная проблема. Единственная проблема, с которой я сейчас сталкиваюсь, заключается в том, что нижний колонтитул сидит ниже фонового изображения, а не поверх него. – Rob

Попробуйте '#footer {position: relative;}', если это не противоречит тому, как вы уже используете нижний колонтитул. – Supr

См. Http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp – Supr

Не видя кода это трудно ответить, но в поджигатель/WebKit инструменты для разработчиков проверить переполнение CSS и другие свойства отображения элементов html и body, а также любые другие элементы, которые обертывают ваш контент. Вероятно, есть переполнение: auto там, где требуется настройка для переполнения: hidden;

источник

2012-02-02 10:59:46 wheresrhys

Просто добавленный код на мой вопрос. – Rob

Большинство элементов имеют переполнение: автоматически по умолчанию, поэтому попробуйте установить переполнение: скрыто на теле и html – wheresrhys

Глядя на ваш код, он может также быть чем-то связанным со стилями на #mainContent и #body, сталкивающимся странным образом – wheresrhys

А? Почему ты так много волнуешься? Вы не дали никакого кода для анализа, но я предполагаю, что вы после того, как что-то вроде:

body { 
    margin: 0; 
    background: url(folderInRootDirectory/myimage.jpg) no-repeat center center; 
    background-size: cover; 
}

Или альтернатива, которая не использует CSS3, для совместимости с Internet Explorer 8:

#bg_img { 
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
    z-index: -99999999999999; 
} 
body { 
    margin: 0; 
    min-width: 100%; 
    min-height: 100%; 
}

Plus HTML :

<body> 
    <img id="bg_img" src="MYURL.JPG" /> 
    <!-- content --> 
</body>

источник

2012-02-02 11:14:57 lpd

I нужно, чтобы он работал в IE8, чтобы исключить первую часть вашего ответа. Также вторая часть вашего ответа просто растягивает изображение до 100% ширины и высоты. Полноэкранный фоновый скрипт сохраняет пропорции изображения и заставляет его заполнять экран, это совсем другой результат, чтобы сделать это по-своему. – Rob

Я предположил, что это было то, что вы хотели с «полноэкранным» фоновым изображением. Вы хотите, чтобы изображение переполнялось, т. Е. Скрытая часть или уменьшало размер, чтобы он соответствовал контейнеру? – lpd

Я понял, что это липкий нижний колонтитул, создающий дополнительную прокрутку. Если возможно, я бы хотел переполнения: hidden; так как это просто заполнит окно браузера. Я добавил свой код. – Rob

Попробуйте пару для элемента тела,

* { 
    margin: 0; 
    padding: 0; 
} 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    background: none repeat scroll 0 0 transparent; 
    border: 0 none; 
    outline: 0 none; 
    vertical-align: baseline; 
} 
body { 
    color: #404040; 
} 

body { 
    background: url("../design/bg.gif") repeat-x scroll 0 0 #FFFFFF; 
    font: 0.8em/1.5 "arial",sans-serif; 
}

источник

2012-02-02 12:16:34 Guru

Улыбается, но снова я не думаю, что это сработает, потому что нет ничего, чтобы изменить размер фонового изображения и сохранить его соотношение сторон. – Rob

Полноэкранный фон работает с липким нижним колонтитулом?

ответ

Смежные вопросы