Изображения и динамический макет

голоса
1

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

#header
{
    width: 50em;
    height: 6em;
    margin-bottom: .5em;
    background: url(/IMAGES/header.png);
}

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

Как я могу сделать мой образ растяжку и мармелад, вместо того чтобы повторять или получать отрезаны? (Я хотел бы CSS-решения , если это возможно ... У меня есть некоторые HTML идея в магазине, уже есть ).

Задан 10/12/2008 в 02:07
источник пользователем
На других языках...                            


4 ответов

голоса
0

@Pianosaurus, я думаю, что ваша идея может быть самым простым, хотя и ограниченный. Просто, не растягивать изображение, но убедитесь, что он хорошо выглядит, когда она не растягивается (в центре, и не позволяйте ему повторять). Кроме того, если вы используете достаточное количество отступа по краям вашего заголовка изображения, размер страницы вниз бы не вызвать такие большие проблемы, либо.

Ответил 10/12/2008 в 02:21
источник пользователем

голоса
0

Там нет никакого способа использовать CSS для растяжения фонового изображения. Вы должны использовать Javascript или что-то подобное. Тем не менее, если у вас есть изображение, которое не нужно повторять (например, вписывающийся в фоновом режиме), вы могли бы сделать что-то вроде этого:

background-position: center center;
background-repeat: no-repeat;

Приложение: Положение имеет следующий формат: <верхний | центр | низ | XPOS> <влево | центр | право | YPos> где XPOS и YPos могут быть даны в регулярной моде (эм, рх,%, и т.д. ...) ,

Ответил 10/12/2008 в 02:14
источник пользователем

голоса
0

Я уверен , что вы не можете изменить масштаб фоновых изображений. Если файл header.png был включен в качестве imgтега, то вы можете установить его высоту и ширину , чтобы быть рядом emsи браузер будет изменить его размер (обычно делая его похожим на дерьмо , хотя).

Помните также, что почти все современные браузеры страницы масштабирования в эти дни, которые будут масштабироваться все без изменения макета слишком много. Может быть, сказать своим пользователям использовать эту функцию?

Ответил 10/12/2008 в 02:14
источник пользователем

голоса
0

Единственный способ, которым я когда-либо найденный:

  • Установить фон #header в BGCOLOR коллекторных изображений.
  • Поместите новый DIV внутри #header
  • Разделить изображение заголовка в 2
  • Установить левую половину нового изображения в качестве фона #header выровненных-влево
  • Установите правую половину нового изображения, как # header.div фон выровненных-вправо

Конечно, это только собирается работать с соответствующими изображениями, хотя.

Ответил 10/12/2008 в 02:13
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more