повторение изображения в зависимости от размера браузера

Question

повторение изображения в зависимости от размера браузера

0

Поэтому я хочу, чтобы трава заполнялась слева направо прямо над моим нижним колонтитулом. Мне трудно заставить его повториться. Я поставил положение на фиксированное, а также поплавок: осталось, но все равно не повезло. Я бы просто постоянно помещал в свой HTML больше изображений, но я чувствую, что могу сделать это с помощью CSS и не иметь, как 100 строк дополнительного кода. Кроме того, я хочу, чтобы изображения увеличивались или убирались, если пользователь делает браузер более крупным или меньшим.

живая демонстрация

HTML

<figure>
        <img src="arrow.png" alt="arrow" class="arrow">
        <p class="clickHere"> Click one! </p>

        <img src="downwardmonkey.png" alt="down" class="head">
        <img alt="down" class="footer">
    </figure>

CSS

figure img.footer
{
    position: fixed;
    bottom: 45px;
    float: left;
    background-image: "grass.png";
    background-repeat: repeat-x;
}

если какой-либо другой код необходим, чтобы помочь мне сообщить!

Ankur Aggarwal 22 март 2014, в 22:11

Источник

0

background-image: url("grass.png"); ???
Salman A 22 март 2014, в 20:19
0

изменил это к этому, но это все еще не повторяется
user3380292 22 март 2014, в 20:24
0

Также есть ошибка 404. Отредактируйте путь (grass.png не находится в той же папке, что и таблица стилей).
Salman A 22 март 2014, в 20:25
0

действительно? iam.colum.edu/students/jordan.max/algorerhythm/CSS/Grass.png :)
user3380292 22 март 2014, в 20:28

Показать ещё 2 комментария

Теги:

html

css

background-repeat

1 ответ

Ещё вопросы

изменил это к этому, но это все еще не повторяется
Также есть ошибка 404. Отредактируйте путь (grass.png не находится в той же папке, что и таблица стилей).
действительно? iam.colum.edu/students/jordan.max/algorerhythm/CSS/Grass.png :)

Ankur Aggarwal · Accepted Answer · 2014-03-22T17-45-00.000Z

Вместо того, чтобы помещать теги изображений, поместите div и предоставите ему фоновое изображение

   <figure>
        <div class="grassImageDiv"></div>
   </figure>

CSS:

.grassImageDiv
{
    display: inline-block;
    background-image: url("grass.png");
    width:100%; //To make it browser size independent
    height: 80px;
}

Вы можете указать высоту и ширину в соответствии с вашими потребностями.