CSS фон с градиентом и рисунком

Question

CSS фон с градиентом и рисунком

0

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

Я подумал, что могу исправить это, добавив div, который содержит образ рисунка и растягивается по всему телу, но он не увенчался успехом. Есть ли способ исправить эту проблему?

body {

...
background-repeat: no-repeat;
background-attachment: fixed;
background-image: linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.05, rgb(255,255,255)),
    color-stop(0.53, rgb(171,205,139)),
    color-stop(0.77, rgb(171,205,139))
);}

И вот как я пытаюсь повторить образ рисунка

background-image:url('mypattern.png');
background-repeat:repeat;

guenis 23 сен. 2013, в 20:30

Источник

Теги:

html

css

css3

1 ответ

Ещё вопросы

Shalom Aptekar · Accepted Answer · 2013-09-23T16-39-00.000Z

Похоже, вам, скорее всего, понадобится создать два элемента, которые будут расположены друг над другом. Существует аналогичный вопрос здесь о stackoverflow, посвященный этой проблеме

LINK CSS-градиент выше фонового рисунка

РЕДАКТИРОВАТЬ

что-то вроде этого может работать

.example3 {
    background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
    background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}

ССЫЛКА

http://www.heresonesolution.com/2010/09/using-a-css-gradient-and-a-background-image-on-the-same-element/

Я видел это решение раньше и теперь повторил его с background-repeat: repeat. IDK почему, но это сработало, спасибо.
не волнуйтесь! спасибо за проверку!