CSS. Повтор фонового изображения (Урок 7)

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

CSS

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

 

body {

background-color: #c3c3c3;

background-image: url (../images/pattern.png);

}

CSS

 

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

 

body {

background-color: #c3c3c3;

background-image: url (../images/pattern.png);

background-repeat: no-repeat;

}

CSS

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

 

body {

background-color: #c3c3c3;

background-image: url (../images/pattern.png);

background-repeat: repeat-x;

}

CSS

 

Аналогично мы можем поступить с изображением в центре. Взять какой-нибудь маленький кусочек изображения (например вырезать в фотошопе) и растиражировать его по оси X. На выходе мы получим точно такой же результат, но с меньшими затратами по размеру.

CSS

 

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

 

#main {

outline: 1px solid #FAA21A;

width: 800px;

height: 421px;

margin: 29px auto; 

background-image: url (…/images/bg_s.jpg);

background-repeat: no-repeat;

}

CSS

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

 

#main {

outline: 1px solid #FAA21A;

width: 800px;

height: 421px;

margin: 29px auto; 

background-image: url (…/images/bg_s.jpg);

background-repeat: repeat-x;

}

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

CSS

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

На этом урок закончим

 

Урок подготовлен по материалам Евгения Попова, который является грамотным специалистом в данной теме. Я когда-то сам проходил обучение по его видео-курсу «Все технические моменты онлайн-бизнеса в видеоформате», с которым вы при желании можете ознакомится по этой ссылке.
Видео-курс Е. Попова
Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *