Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії WebStudio2U Мапа сайту Авторизація

Як зробити, щоб тлом сайту була картинка? Яким має бути код?

Додано:
19 серпня 2010
Переглядів:
10916
Оцінка:
 
Оцініть статтю:
Корисна - Не корисна

Відповідь

Установлювати й змінювати настроювання тла сторінок сайту зручніше за все за допомогою таблиць стилів CSS. За настроювання тла відповідає параметр background, що може мати від 1 до 5 необов'язкових атрибутів. Якщо застосувати ці атрибути до тегу <body>, то будуть задані настроювання тла для всього сайту. Також кожний із цих атрибутів може бути задано як окремий параметр.

Колір тла можна задати за допомогою атрибута background-color:
body {
background-color:#000;
}
Такий код задає чорний колір тла.

Для вставки фонового зображення використовується background-image. У значенні цього атрибута потрібно вказати шлях до зображення (url):
body {
background-image:url("my-image.jpg");
}
У даному прикладі зображення перебуває в тій же папці, що й файл css. У іншому випадку потрібно вказувати повний шлях до зображення.

Щоб зображення повторювалося на екрані, можна використовувати одне зі значень властивості background-repeat:
body {
background-image:url("my-image.jpg");
background-repeat:repeat-x;
}
У даному прикладі використовуване фонове зображення буде повторюватися тільки по горизонталі. Інші припустимі значення:
background-repeat: repeat-y - зображення повторюється тільки по вертикалі
background-repeat: repeat - зображення повторюється по горизонталі й вертикалі
background-repeat: no-repeat - зображення не повторюється

background-attachment - даний параметр визначає, чи буде фонове зображення фіксуватися при прокручуванні сторінки:
background-attachment: scroll - переміщується разом із прокруткою сторінкою
background-attachment: fixed - при прокручуванні тло залишається нерухомим
Приклад:
body {
background-image:url(" my-image.jpg");
background-attachment:fixed;
}
У даному прикладі зображення my-image.jpg не буде переміщуватися при прокручуванні сторінки.

background-position - задає розташування малюнка щодо екрана, за замовчуванням воно виводиться в лівому верхньому куті. Значення цієї властивості являє собою набір координат Х (по горизонталі) і Y (по вертикалі), які начинаються з лівого верхнього кута. Може задаватися:
у фіксованих одиницях (пікселі, сантиметри)
у відсотках
словесно: - top (зверху), bottom (знизу), center (по центру), left (ліворуч) і right (праворуч).
Приклад:
body {
background-image:url("my-image.jpg");
background-position:center;
}
У даному прикладі зображення буде "вирівняно" по центрі сторінки.

Всі ці настроювання можуть бути записані в одній властивості background:

body
{
background:#000 url("my-image.jpg") no-repeat fixed center;
}
У результаті зображення my-image.jpg буде розміщено по центру сторінки, що має чорне тло й не буде переміщатися при прокручуванні сторінки.

Категорія

Теги цієї статті