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

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

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

 

Інструкція

1. Виберіть картинку, яку ви хочете використати в якості фонового зображення. Якщо передбачається поверх ілюстрації вставити текст, то в цьому випадку бажано обмежитися варіантами без зайвої строкатості, у складі яких використовується декілька близьких за характером кольорів. В принципі для усунення брижів можна створити "підкладку" для контенту, - і проблема буде успішно розв'язана.

2. Підкоригуйте зображення за допомогою програми Adobe Photoshop. Коли робота буде закінчена, в меню "Файл" виберіть команду "Зберегти для Web" і вкажіть потрібну теку. Якщо це перше зображення, яке використовуватиметься для сайту, то автоматично створюється тека "Images".

3. У тегу <body> пропишіть атрибут background= шлях до зображення. Приклад запису: <body background= images.gif> чи <body background= url>. При цьому майте на увазі, що тег <body> повинен зустрічатися в коді тільки один раз, не слід його розмножувати.

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" - шлях до фонового зображення.

 


Надрукувати  

Схожі матеріали