Задаємо фонову картинку для сайту

Вітаю вас на сайті Impuls-Web!

Навігація по статті:

Деякі CMS, такі як, наприклад, WordPress дають можливість задати фонове зображення або колір в налаштуваннях оформлення теми. В цьому випадку вам всього лише потрібно:

2. У меню налаштувань теми вибираємо пункт «Фонове зображення».

Залежно від теми назва цього пункту може змінюватися або взагалі цей пункт може перебувати в якомусь іншому розділі меню або бути відсутнім.

3. Далі натискаємо кнопку «Вибрати зображення»

5. Після того як ви виберете картинку, вам будуть доступні додаткові параметри для фонового зображення.

Зверніть увагу! Для фону найкраще вибирати зображення, які мають дозвіл не менше 1200px-1600px по ширині, так як при великих дозволах моніторів, якщо картинка буде меншого розміру, буде дуже помітно погана якість фону.
Не варто так само вибирати зображення, які мають дозвіл по ширині більше 1600-1800 пікселів. Так як в цьому випадку картинка буде мати занадто великий розмір і це обов'язково позначиться на швидкості завантаження сайту.

1. За допомогою FTP-клієнта або панель управління хостингом, завантажуємо в папку з зображеннями, яка знаходиться в кореневій папці сайту на хостингу, фонове зображення для нашого сайту. Якщо у вас немає такої папки, або ви не можете її знайти, то ви можете самі створити нову папку, і назвати її, наприклад, «Images» або «img».
2. Відкрийте файл стилів вашого сайту або файл стилів теми, в разі якщо у вас сайт зроблений на CMS, за допомогою Notepad ++.

Як редагувати файли сайту по FTP за допомогою Notepad ++ я розповідала в цій статті:
Редагування файлів сайту в Notepad ++

3. Перейдіть в самий кінець файлу стилів і допишіть наступний код для тега body:

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

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

У код, наведений вище можна додати наступні параметри:

1. Властивість background-repeat. Можна задати такі значення:
- repeat - повтор фону по вертикалі
- no-repeat - немає повтору
- repeat-x - замостити по горизонталі
- repeat-y - замостити по вертикалі
2. Властивість background-position. Має кілька основних параметрів:
- top left - вирівняти фон по верхньому лівому краю
- top right - вирівняти фон по верхньому правому краю
- bottom right - вирівняти по нижньому правому краю
- bottom left- вирівняти по нижньому правому краю
- top center - вирівняти фон горизонтально по центру, а вертикально по верхньому краю
- center - дозволить вирівняти фон по центру сторінки як по горизонталі так і по вертикалі.

Також background-position можна задавати у відсотках або пікселях.
У цьому випадку це буде виглядати так:

Читайте також:

Як вставити посилання в HTML і оформити її в CSS?
Як зробити обтікання картинки текстом в HTML?
Ефект підкреслення при наведенні на посилання
Створення landing page на WordPress
Як перевірити індексацію сайту в пошукових системах
Чи потрібно додавати сайт в Рамблер?