Бесшовный фон для сайта

besshovnui-fon-dlya-saita

И снова здравствуйте друзья! Как я и обещал в прошлой статье, сегодня мы поработаем в текстовом редакторе notepad plus plus, но и это еще не все. Помните про сайт, на котором можно было скачать фоны для сайта. Они нам сегодня тоже понадобятся. Заинтригованны? Что же такое вкусненькое я для вас приготовил? Тогда читайте статью полностью.


Сегодня я решил продемонстрировать вам, как работают бесшовные фоны и вы узнаете, как с помощью небльшой текстуры сделать красивый фон для всего сайта или блога.

Если вы готовы, то мы начинаем урок.

Шаг 1. Открываем текстовый редактор

Шаг 2. Создаем новый документ и сохраняем его как Index.html

Шаг 3. Копируем ниже представленный код в редактор

 

 
<div id="container">

Вот так работает бесшовный фон

</div>
&nbsp;

&nbsp;

Шаг 4. Создаем новый документ и сохранчем его как style.css

Шаг 5. Копируем в него ниже представленный код

body {
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 в любом браузере и посмотреть, как один маленький квадрат текстуры, клонируется в один большой фон для нашего сайта, это есть основной принцип бесшовной текстуры.

 На этом у меня все. Спасибо за внимание и до скорых встреч.

С уважением, Антон Лапшин
автор блога http://AzbukaBloga.ru

Приз за первый комментарий
 

Комментарии: 4

  1. 2013-10-25 в 10:28

    Хороший вариант для фона, тем более объем он занимает маленький.
    А что бывают и фоны со швами, раз этот бесшовный? Интересно узнать.

    • Антон Лапшин :
      2013-10-26 в 12:15

      Бесшовный — это потому что маленькая текстура когда преобразуется в общий фон, то мы видим один единый целый фон. А если текстура была «неправильная», то мы бы видели швы, как на плитки в ванной.

  2. 2013-11-06 в 13:53

    Скажите, пожалуйста, Антон, ведь можно просто в интернете скачать понравившийся фон и его установить? В чем разница от вашего варианта? В шаблоне ж есть функция выбора фона. Спасибо

    • Антон Лапшин :
      2013-11-06 в 21:17

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

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

На вверх