И снова здравствуйте друзья! Как я и обещал в прошлой статье, сегодня мы поработаем в текстовом редакторе notepad plus plus, но и это еще не все. Помните про сайт, на котором можно было скачать фоны для сайта. Они нам сегодня тоже понадобятся. Заинтригованны? Что же такое вкусненькое я для вас приготовил? Тогда читайте статью полностью.
Сегодня я решил продемонстрировать вам, как работают бесшовные фоны и вы узнаете, как с помощью небльшой текстуры сделать красивый фон для всего сайта или блога.
Если вы готовы, то мы начинаем урок.
Шаг 1. Открываем текстовый редактор
Шаг 2. Создаем новый документ и сохраняем его как Index.html
Шаг 3. Копируем ниже представленный код в редактор
<div id="container">
Вот так работает бесшовный фон
</div>
Шаг 4. Создаем новый документ и сохранчем его как style.css
Шаг 5. Копируем в него ниже представленный код
font: small Verdana, Arial, sans-serif;
background: url(wallpaper1.jpg);
color:#333;
text-align:center;
}
#container {
background:#fff;
width:700px;
margin:0 auto;
padding:5em 0;
}
Шаг 6. Сохраняем index.html и style.css. После чего перемещаем их в одну папку. Сюда же копируем одну из бесшовных текстур, которую вы скачали в этой статье.
Шаг 7. Теперь нужно внести корректировки в файл стилей, так как у нас текстура называется не wallpaper1.jpg.
Сохраняем style.css
Шаг 8. Теперь нужно открыть файл index.html в любом браузере и посмотреть, как один маленький квадрат текстуры, клонируется в один большой фон для нашего сайта, это есть основной принцип бесшовной текстуры.
На этом у меня все. Спасибо за внимание и до скорых встреч.
Хороший вариант для фона, тем более объем он занимает маленький.
А что бывают и фоны со швами, раз этот бесшовный? Интересно узнать.
Бесшовный — это потому что маленькая текстура когда преобразуется в общий фон, то мы видим один единый целый фон. А если текстура была «неправильная», то мы бы видели швы, как на плитки в ванной.
Скажите, пожалуйста, Антон, ведь можно просто в интернете скачать понравившийся фон и его установить? В чем разница от вашего варианта? В шаблоне ж есть функция выбора фона. Спасибо
Не кто не заставляет использовать мой вариант, просто бесшовный фон обычно маленького размера и поэтому страничка грузиться чуть-чуть быстрее. А если в шаблоне есть функция выбора, то это здорово. Вам тогда не нужно ковыряться в коде шаблона, за вас это сделали разработчики шаблона и вынесли кнопку выбора фона прямо в админку вашего блога.