Создание фона содержимого. Градиент далее статика. Как

  • Dmitry52

    (@dmitry52)


    11 лет, 12 месяцев назад

    Здравствуйте. Подскажите, люди добрые. Верстаю тему. Мне нужно изменить фон содержимого. Но сделать его хитрым. Сначала должна идти градиентная полоска вниз, после статистическая картинка последнего цвета градиента.

    Сейчас кусок файла стилей выглядит так:
    #content{
    float:left;
    width:92%;
    margin-right:-100%;
    padding:20px 4%;
    overflow:hidden;
    background-image: url(wp-content/uploads/2012/09/gradient.jpg);
    }

    У меня получается фон содержимого сейчас такой: повторяющийся градиент. Я сделал картинку ostatok.jpg (последний цвет градиента). Как эту картинку сделать повторяющийся в конце после градиента?

    Спасибо огромное тому кто поможет!!!!

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • skodnik

    (@skodnik)

    11 лет, 12 месяцев назад

    Можно, например, двумя блоками один в одном. Нижний — повторяющаяся картинка, верхний Ваш градиент. Высота верхнего — высота градиента, нижний , т.е. родительский может быть элементом body.

    Автор Dmitry52

    (@dmitry52)

    11 лет, 12 месяцев назад

    А можете подсказать код как это сделать? Я сам не догоняю пока… Как я понимаю, за оформление содержимого отвечает часть кода #content. Значит в ней и нужно все указать? Как мне сделать так как Вы написали? (сначала картинка градиента, после нее родительский элемент Body)?

    skodnik

    (@skodnik)

    11 лет, 12 месяцев назад

    Если совсем просто то так.

    Разметка:

    <body>
    <header>...</header>
    ...
</body>

    Стили:

    body {
    background: url(bg.png)
}
header {
    height: 150px;
    background: url(bg-gr.png) repeat-x;
}

    А вообще, Вам и мне сейчас верно заметят, что данный вопрос не относится напрямую к WordPress.

    Рекомендую к изучению htmlbook.ru/samhtml и htmlbook.ru/samcss. Желаете, сделаю за Вас, правда, не бесплатно.

Просмотр 3 ответов — с 1 по 3 (всего 3)
  • Тема «Создание фона содержимого. Градиент далее статика. Как» закрыта для новых ответов.