Невозможно изменить размер второго фонового пространства

Question

Невозможно изменить размер второго фонового пространства

0

Я только начинаю с веб-кодирования, и я извиняюсь за любые глупости, которые я мог бы придумать.

Я пытаюсь изменить шаблон веб-сайта. Этот веб-сайт разделен на два фоновых изображения: один для вершины, который немного выходит за середину страницы, а другой - для нижней части страницы.

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

Вот полный CSS http://pastebin.com/h2KdKtdq

Верхняя часть фонового изображения

.bg1 {background:url(../images/bg1.gif) center 0 repeat-x; min-height:100%;}

Хотя нижняя часть фонового изображения

body { 
background:url(../images/bg.gif) 50% 0 repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; 
line-height:18px;
color:#978e83;
min-width:1003px;
}

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

До сих пор я не нашел никаких вариантов, чтобы пространство нижней части фона появилось дальше, и я буквально застрял в этом.

Вот как выглядит стиль сейчас

благодаря

Segnale007 22 март 2014, в 05:17

Источник

Теги:

jquery

html

css

web

1 ответ

Ещё вопросы

Octavian · Accepted Answer · 2014-03-22T12-12-00.000Z

Поскольку вы говорите, что вы новичок в кодировании, я стараюсь как можно больше упростить. Простите меня, если я упрощу.

Я на самом деле просто написал длинное объяснение, а затем заметил, что адресная строка видна на вашем изображении. Я проверил сайт, а сверху и снизу на самом деле оба находятся в bg1.gif. Фоновое изображение тела - это скорее тот же самый нижний цвет, что и в прошлом, когда заканчивается дно bg1.gif.

Итак, есть простое решение:

    .bg1{background-size: 100% 150%;}

Просто измените второе значение, и размер цветовых блоков сдвинется. Все, что он делает, - это масштаб фона, и поскольку в этом случае фон - это простые цвета, он не должен иметь большой проблемы, интерполируя изображение.

Это самый простой способ исправить вашу непосредственную проблему. В идеале вы бы закодировали весь фон по-разному. Я напишу еще один ответ ниже, как это сделать.

EDIT: Я только заметил, что между цветными областями есть небольшая линия, и в цветовые области есть едва заметная текстура - независимо от того, что мое выше решение все еще работает, с небольшими искажениями. До тех пор, пока вы не слишком сильно растягиваетесь, вы должны быть в порядке.

Если вы хотите сделать это без каких-либо искажений, самое простое решение - просто отредактировать изображение и добавить больше места наверху. Редактирование изображения - хорошая идея, так как способ форматирования фона использует много накладных расходов. Фон 1309px x 1228px, но он может быть шириной 10 px с повторением-x. Это само по себе может уменьшить размер файла с 851 КБ до ~ 10 КБ.

Это сработало, спасибо :) .. Вы спасли меня еще больше дней исследований.
Рад помочь! Не могли бы вы отметить этот ответ как принятый?