Как сделать фоновый рисунок на сайте?

Постичь азы сайтостроения можно самостоятельно, в интернете и книгах представлено достаточно информации по этой теме. Однако на первоначальном этапе часто возникают затруднения в применении того или иного тега. Действительно, самые распространенные компоненты лучше запомнить, поскольку они необходимы при написании любого сайта.
Создать сайт самостоятельно с Wix.com

Инструкция

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

Подкорректируйте изображение с помощью программы Adobe Photoshop. Когда работа будет закончена, в меню «Файл» выберите команду «Сохранить для Web» и укажите нужную папку. Если это первое изображение, которое будет использоваться для сайта, то автоматически создается папка «Images».

В теге пропишите атрибут background="путь к изображению". Пример записи: или . При этом имейте в виду, что тег должен встречаться в коде только один раз, не следует его размножать.

Сохраните изменения в блокноте, нажмите кнопку «Обновить» в браузере. На экране появится фоновый рисунок. Если размеры изображения меньше параметров web-страницы, то картинка будет дублироваться столько раз, сколько необходимо для заполнения всего пространства. Исправить этот недостаток можно двумя способами:• с помощью программы Adobe Photoshop установите требуемые параметры картинки в пикселах («Изображение» - «Размер изображения»);• задайте нужные размеры в html-коде.Например, если требуется ширина 1250 px, а высота – 650 px, то нужно дописать необходимые атрибуты для ячейки таблицы, в которую будет помещена картинка. Нельзя задать размер в теге - изображение всегда будет отображаться в натуральную величину.

Аналог ccs для вставки фонового изображения: background-image BODY { background-image: url(images/bg.jpg); }Атрибут «background-image: url(images/bg.jpg)» – путь к фоновому изображению.

Оцените статью!