Понедельник, 30 января, 2023

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

Последние:
Вячеслав Питель
Вячеслав Питель
Редактор сайта, опыт работы 10 лет, пишу на тему гаджетов, новостей в мире технологий, игр и софта admin@uspei.com, VK, OK, сот. 89132476241

Здравствуйте, уважаемые читатели сайта 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;
 }

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

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

- РЕКЛАМА -
- РЕКЛАМА -
Сейчас:

“Кто-то из вас может оказаться на днище социальной жизни”: рязанский депутат провел беседу со школьниками на профориентации

В городе Касимов Рязанской области депутат-коммунист городской Думы Роман Вереин выступил перед собравшимися школьниками на занятии по профориентации с...
- РЕКЛАМА -

Также на эту тему:

- РЕКЛАМА -
Adblock
detector