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

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

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

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

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

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

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

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

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

body {
 background-color: #c3c3c3;
 background-image: url (../images/pattern.png);
 background-repeat: 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;
 }

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

Но имейте в виду, что тиражировать можно только однородное изображение, естественно картинку с автомобилем вы так растиражировать не сможете.

0

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Помоги проекту - подпишись на наш Яндекс.Дзен канал!