Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28


Чувашия-это моя Россия

Повторение мозаики в CSS.

Предотвратить повторение фонового рисунка или разрешить построение мозаики лишь в одном направлении можно, используя свойство background-repeat.

Свойство background-repeat. Значения:

                        	repeat
                            repeat-x
                            repeat-у
                            no-repeat
                            inherit. 

Начальное значение: repeat. Применимо: Ко всем элементам. Наследуется: Нет.

Таким образом, по умолчанию фоновые изображения в CSS тиражируются горизонтально и вертикально. Однако подобное поведение можете отключить, заставив изображение появиться лишь один раз, используя для этого значение no-repeat.

Значение repeat-x позволяет оставить одно горизонтальное направление тиражирования. Аналогично и repeat-y позволяет формировать мозаику только по вертикальной оси.

Пусть у нас имеется какой-то кусок фоного изображения, например, такой:

Возьмем элемент div с размерами 500х400 и наш кусок фоного изображения; применим к нему наше свойство background-repeat: repeat; сначало, потом background-repeat, то есть по умолчанию:


style="background-color: #3CC; background-image: url(../fon/625.jpg); background-repeat: repeat-x; width: 500px; height: 400px; margin: auto auto;"


style="background-color: #3CC; background-image: url(../fon/625.jpg); background-repeat: repeat-y; width: 500px; height: 400px; margin: auto auto;"


Запоминаем сначала идет свойство background-image и адрес куда Вы обращаетесь для Вашего изображения, то есть получается background-image: url(../fon/625.jpg); потом решаем как будем его размножать: по всему нашему элементу, по-горизонтали, по-вертикали или, вообще выводим, в одном единственном экземпляре:

style="background-color: #3CC; background-image: url(../fon/625.jpg); background-repeat: no-repeat; width: 500px; height: 400px; margin: auto auto;"


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: