Здравствуйте, уважаемые читатели сайта 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;
}
И на выходе получаем точно такой же результат, однако наш сайт будет загружаться НАМНОГО быстрее.
Но имейте в виду, что тиражировать можно только однородное изображение, естественно картинку с автомобилем вы так растиражировать не сможете.