Повтор фонового изображения в CSS (background-repeat)

0
804

Здравствуйте, уважаемые читатели сайта Uspei.com. Сегодня мы продолжим работу с фоновыми картинками и, изучив тему повтора фонового изображения, вы поймете всю значимость этой технологии. Это значительно сокращает время загрузки сайта, а также предоставляет много других возможностей и дизайнерских решений.

Повтор фонового изображения для body

Для начала перейдите на этот сайт и скачайте любое изображение понравившееся вам, сохранив его в нашей папке images.

<— Я взял эту картинку для работы, как видите она очень маленькая и весит всего 83 байта, что минимум в 10 000 раз меньше среднего размера изображения. Браузер будет загружать НАМНОГО быстрее, что очень важно для дизайна и производительности сайта (читайте о необходимости оптимизации изображений тут). Теперь мы попробуем это маленькую картинку поставить на фон нашего огромного тега body.

body {
 background-color: #c3c3c3;
 background-image: url (../images/pattern.png);
 }

Создадим фоновое изображение тегу body
Мы видим, что наша маленькая картинка растиражировалась на весь огромный тег body. При этом, мы с вами можем управлять этим повторением. Мы можем запретить повторение ВООБЩЕ, а можем запретить либо по горизонтали, либо по вертикали. За это отвечает свойство “background-repeat” и его значение “repeat” (“повторять”) по умолчанию. Значение “no-repeat” запрещает повторение.

body {
 background-color: #c3c3c3;
 background-image: url (../images/pattern.png);
 background-repeat: no-repeat;
 }

no-repeat
Мы можем разрешить картинке повторяться только по оси X или Y.

body {
 background-color: #c3c3c3;
 background-image: url (../images/pattern.png);
 background-repeat: repeat-x;
 }

Повторение repeat-x

Повтор фонового изображения в центре

Аналогично мы можем поступить с изображением в центре. Взять какой-нибудь маленький кусочек изображения (например вырезать в фотошопе толщиной 2-5 пикселя и высотой с блок) и растиражировать его по оси X. На выходе мы получим точно такой же результат, но с меньшими затратами по размеру, так как у нас будет загружаться на все изображение, а только тонкий его фрагмент и растиражированный на всю ширину блока.
Вырежем фрагмент картинки
Если наша фоновая картинка весит 8,5 kb, то на выходе она будет весить в 200 раз меньше, то есть загрузится в 200 раз быстрее! Вы можете скопировать эту картинку тут. Она настолько тонкая, что вам даже придется ее поискать))). Не забудьте поместить ее в папку images. Но для начала давайте запретим тиражирование.

#main {
 outline: 1px solid #FAA21A;
 width: 800px;
 height: 421px;
 margin: 29px auto;
 background-image: url (.../images/bg_s.jpg);
 background-repeat: no-repeat;
 }

Но для начала давайте запретим тиражирование
Теперь давайте зададим тиражирование по оси X.

#main {
 outline: 1px solid #FAA21A;
 width: 800px;
 height: 421px;
 margin: 29px auto;
 background-image: url (.../images/bg_s.jpg);
 background-repeat: repeat-x;
 }

И на выходе получаем точно такой же результат, однако наш сайт будет загружаться НАМНОГО быстрее.
тиражировать можно только однородное изображение
Но имейте в виду, что тиражировать можно только однородное изображение, естественно картинку с автомобилем вы так растиражировать не сможете.

Оставьте комментарий

Пожалуйста, введите Ваш комментарий
Пожалуйста, введите Ваше имя здесь

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.