Як зробити гумовий тло


 

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



Вам знадобиться

— навички роботи з html, css, java-script.

Інструкція

  1. Відкрийте код свого сайту в будь-якому редакторі, наприклад, програму «Блокнот» або спеціальною програмою для веб-дизайну, Dreamweaver. Вставте в код наступні рядки, щоб розтягнути тло сайту. Пропишіть Background: url (‘»Вставте посилання на зображення»’).
  2. Для того щоб розмір картинки підганявся по горизонталі, використовуйте наступний код: Background: url (‘»Вставте посилання на зображення»’ repeat-x), по вертикалі — в кінці коду х замініть на у. Якщо стиль сайту прописаний у файлі css, вставте код в нього. Таким чином, ви зможете поставити гумовий фон на ваш сайт.
  3. Скористайтеся наступним прикладом коду, який поміщає фоновий малюнок на сторінку і дозволяє автоматично розтягнути його, підлаштовуючись під дозвіл того монітора, на якому відбувається перегляд сторінки. Приклад коду: body {background: «Вставте посилання на фонове зображення» () no-repeat fixed left center; потім background-size: [...].
  4. Використовуйте для розтягування фонового зображення просту вставку картинки в якості фонової і встановіть для неї ширину 100%. Наприклад, вставте в код сторінки наступний текст:. Таким чином, буде використовуватися підгін ширини картинки, але її пропорції будуть порушені.
  5. Аналогічно можна встановити розтягування малюнка по висоті, замість атрибута width використовуйте height. Або скористайтеся наступним прикладом коду для css: і після нього додайте 100% ширину зображення, як у попередньому прикладі. Також ви можете за допомогою скрипта дізнатися дозвіл екрана користувача і відредагувати під нього розміри вашої таблиці.