Як зробити фоновий малюнок на сайті

Як зробити фоновий малюнок на сайті

Осягнути ази сайтобудівництва можна самостійно, в інтернеті і книгах представлено достатньо інформації з цієї теми. Проте на початковому етапі часто виникають труднощі у застосуванні того чи іншого тега. Дійсно, найпоширеніші компоненти краще запам’ятати, оскільки вони необхідні при написанні будь-якого сайту.

Інструкція

  1. Виберіть картинку, яку ви хочете використовувати в якості фонового зображення. Якщо передбачається поверх ілюстрації вставити текст, то в цьому випадку бажано обмежитися варіантами без зайвої строкатості, в складі яких використовується кілька близьких за характером кольорів. В принципі для усунення мерехтіння можна створити «підкладку» для контенту, — і проблема буде успішно вирішена.
  2. Підкоригує зображення за допомогою програми Adobe Photoshop. Коли робота буде закінчена, в меню «Файл» виберіть команду «Зберегти для Web» і вкажіть потрібну папку. Якщо це перше зображення, яке буде використовуватися для сайту, то автоматично створюється папка «Images».
  3. У теге пропишіть атрибут background = «шлях до зображення». Приклад запису: або. При цьому майте на увазі, що тег повинен зустрічатися в коді тільки один раз, не слід його розмножувати.
  4. Збережіть зміни в блокноті, натисніть кнопку «Оновити» в браузері. На екрані з’явиться фоновий малюнок. Якщо розміри зображення менше параметрів web-сторінки, то картинка буде дублюватися стільки разів, скільки необхідно для заповнення всього простору. Виправити цей недолік можна двома способами:

    • за допомогою програми Adobe Photoshop встановіть опції картинки в пікселах («Зображення» — «Розмір зображення»);

    • задайте потрібні розміри в html-коді.

    Наприклад, якщо потрібно шириною 1250 px, а висота — 650 px, то потрібно дописати необхідні атрибути для елементу таблиці, в яку буде поміщена картинка.

    <table>

    <tr>

    <td background=»images/1.gif» alt=»картінка» width=»1250″ height=»650″>

    </ Td>

    </ Tr>

    <table>

    Не можна задати розмір в теге <body> — зображення завжди буде відображатися у натуральну величину.
  5. Аналог ccs для вставки фонового зображення:

    <html>

    <head>

    <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

    <title> background-image </ title>

     <style type=»text/css»>

      BODY {

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

         }

    </ Style>

    </ Head>

    <body>

    </ Body>

    </ Html>

    Атрибут «background-image: url (images / bg.jpg)» — шлях до фонового зображення.