Пожалуйста, смотрите at this pageСтранный вопрос набивка
То, что я хочу достичь, это
и
Используя следующую функцию JQ для динамического изменения размера Div высоты на основе документа высота
$(window).load(function() {
$('.sideBg').css({ 'height': ($(document).height())});
});
Что мне не хватает?
Не было бы лучше, если бы вы использовали background на body? Таким образом, вам даже не нужны дополнительные элементы или JavaScript.
body {
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black radial-gradient(ellipse at center, #45484D 0%,black 100%);
background-repeat: repeat-y;
}
Не забудьте использовать background: black url(/design/img/bg/000.png); для колонтитула.
И не забывайте, что вы также должны иметь префикс версии
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -webkit-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -moz-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0,
black -o-radial-gradient(center, ellipse cover, #45484D 0%,black 100%);
перед тем в один без префикса в стилях для тела.
Работа для меня, если я делаю эти изменения с помощью инструментов разработчика
О совместимости: множественные фоны имеют лучшую поддержку, чем градиенты (multiple backgrounds are supported by IE9, в то время как CSS gradients are not). Фактически, это не будет работать в IE 9 именно из-за градиента. Тем не менее, вы можете заставить его работать в IE9 без градиента, добавив до все префиксные версии с множественным фоном (без градиента).
background: url(http://vefaestetik.az/design/img/bg/side_bg.png),
black url(http://vefaestetik.az/design/img/bg/side_bg.png) 100% 0;
У фона уже есть css3 градиент –
Возможно, этот ниже (см. Отредактированный ответ) – Ana
- это совместимость с кросс-браузером? –
вам нужно удалить margin-top, что на вашем .wrapper <div> для верхней части, чтобы быть исправлено:
.wrapper {
background: url("/design/img/wrapper-bg.png") no-repeat center top;
margin-bottom: 0 !important;
margin-left: auto;
margin-right: auto;
/*margin-top: 20px; remove this */
padding-top: 120px;
position: relative;
width: 1020px;
}
Тогда для нижней части я хотел бы предложить, чтобы получить высоту .wrapper <div>:
$(function() {
var wrapperHeight = $('.wrapper').height();
$('.sideBg').css('height': +wrapperHeight+'px');
});
, но оболочка должна быть заполнена сверху –
, тогда вам нужно отрицать верхнюю границу от .sideBg {margin-top: -20px;} – Mark
Если вы столкнулись с ненужным padding, всегда используйте файл reset.css.
Скопируйте код здесь: http://meyerweb.com/eric/tools/css/reset/
Так что проблема? – Blender
@Blender, разве вы не видите, что образец проложен сверху и снизу? –
Итак ... вы хотите, чтобы между рисунком и сверху и снизу не было прокладки? – adamb