Skip to content
Menu
AzbukaBloga.Ru
  • Главная
  • Уроки WordPress
  • Обо мне
  • Услуги
  • Контакты
AzbukaBloga.Ru

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

Posted on 15.10.2012

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

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

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

  • css
  • уроки

4 thoughts on “Бесшовный фон для сайта”

  1. Лилия:
    25.10.2013 в 10:28

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

    Ответить
    1. Антон Лапшин:
      26.10.2013 в 12:15

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

      Ответить
  2. Лилия:
    06.11.2013 в 13:53

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

    Ответить
    1. Антон Лапшин:
      06.11.2013 в 21:17

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

      Ответить

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

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

Нажимая на кнопку 'Отправить комментарий', вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности сайт AzbukaBloga.ru.

один × два =

Рубрики

  • Бесплатности
  • Блоггинг
  • Дизайн
  • Конкурсы
  • Личные записи
  • Новости блога
  • Полезное
  • Раскрутка блога
  • Сайтостроение
  • Шопинг онлайн

Чек-лист по настройке Яндекс Директ

Свежие записи

  • Как я набрал 4507 подписчика или какие самые эффективные каналы сбора подписной базы
  • Не знаете чем открыть формат WebP? Я вам помогу
  • Вспомнить Все любой ценой или Evernote наступает
  • Блог долго грузиться? Ответ — удаляй плагин
  • Как установить счетчик посещаемости Liveinternet?

Свежие комментарии

  • Кирилл к записи Про это забывают 92% блоггеров
  • Марина к записи Не знаете чем открыть формат WebP? Я вам помогу
  • Михаил к записи Популярные SEO блоги
  • Павел к записи Как установить счетчик посещаемости Liveinternet?
  • Людмила к записи Услуги
©2022 AzbukaBloga.Ru | WordPress Theme: EcoCoded
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.