Як зробити картинку фоном в html?

Фоном сторінки називають зображення, яке знаходиться на задньому фоні сайту або будь-який html сторінки. Однак це далеко не всі варіанти, де його використовують.

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

зміст:

цілком
фрагментами
файл CSS
Відео уроки

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

З сьогоднішньої статті ви дізнаєтеся, як можна зробити картинку фоном в html сторінці.

Існує багато візуальних редакторів html коду, найвідомішим з яких є Dreamweaver, він же «Дрім» - це назва застосовують багато вебмастера. Ця програма настільки ідеальна і інтуїтивно зрозуміла, що навіть новачкові можна легко зробити найпростішу html сторінку сайту. А якщо ви не пошкодуєте свого часу і вивчіть цю програму докладніше, то зможете легко створити повноцінний сайт, який оцінять навіть замовники. Не пошкодуйте свого особистого часу, так як потім ці знання допоможуть вам заробити гроші і навіть отримати нову роботу.

Однак повернемося до головної теми статті про те, як зробити картинку фоном в html сторінці.

Існує два основних способи - зробити картинку фоном в html сторінку: цілком або ж заповнити її фрагментами малюнка, розмножив його по всій поверхні.

цілком

Для першого способу потрібно знайти в інтернеті або самому зробити зображення такого розміру, щоб воно повністю заповнювало задній фон сторінки. При цьому врахуйте, що у кожного монітора виставлено свій дозвіл, тому не забувайте про це. Тим більше, що зараз багато користувачів заходять на сайти з мобільних пристроїв (телефони, смартфони, планшети). Такий вид подорожі по інтернету стає все більш популярним, адже вже не рідкість в маршрутці або просто на вулиці зустріти людину, яка щось шукає на просторах інтернету, використовуючи свій телефон. Але тут є нюанс. Щоб сайт правильно і красиво відкривався на мобільних пристроях, повинен бути повністю «Responsive», тобто адаптивним (гумовим). Якими способами це можна зробити ми розглянемо в інших статтях.

фрагментами

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

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

Для цього застосовуються спеціальні коди, які потрібно внести в сторінку в призначене для цього місце. Для цього використовуйте той же Dreamweaver, в якому можна легко розділити сторінку на дві частини - як вона буде виглядати і власне сам код. Коли ви вносите зміни в код, нижче відразу можете побачити результат своєї роботи. Для досвідчених користувачів більше підійде програма Notepad ++, але в ній візуально не видно результатів внесених змін.

Отже, повернемося до першого способу - внесення коду в окремо взяту сторінку сайту.

За виконання цього завдання відповідають певні команди, які потрібно внести до початкового коду документа, причому в правильне місце. Якщо ви користуєтеся редактором Notepad ++, то ви напевно знаєте, куди правильно вставити код. А для новачків фахівці радять використовувати Dreamweaver, оскільки, як згадувалося вище, результат буде видно відразу у вікні внизу.

Головний атрибут, який відповідає за фонове зображення називається background і вставляється після заключного елемента, який означає кінець шапки сторінки ().

Приклад вставки такого коду:

Команда дозволяє власне вже писати сам код, щоб сторінку розуміли браузери і відображали її як сторінку сайту. Його обов`язково потрібно закрити в кінці, набравши команду.

команди і позначають шапку сторінки, в якій теж є вміст - картинка, ключові слова, і назва сторінки (). Цю інформацію використовують пошукові системи при ранжируванні сайту в результатах видачі при пошуку.

Але повернемося до того, як зробити картинку фоном.

Як ми вже говорили вище, за це відповідає команда background, а в нашому прикладі використаний ще й атрибут bgcolor. Він призначений для того, щоб задати точний колір фону, який буде контрастним до кольору букв (text = "red"). У нашому прикладі фон білий, а букви червоного кольору. Це потрібно для того, щоб, коли ви будете використовувати браузер, який не підтримує завантаження фонових зображень, ви все одно могли прочитати текстове вміст сторінки.

Отже, знаходите і завантажуєте в інтернеті картинку з відповідним розміром, яку ви хочете зробити фоном, і вставляєте її на сторінку. На прикладі показано, що вона знаходиться в корені сайту в папці images і називається 111 з розширенням jpg. Як шлях до файлу можна використовувати навіть пряму інтернет посилання, але врахуйте, що якщо сайт, з якого ви її взяли, закриється, то і у вас на сайті фонове зображення пропаде.

Перерахуємо ще команди, з якими використовується цей атрибут.

background-position - задає, де саме на сторінці буде розміщено зображення (left, center, right, top, bottom).

background-attachment - встановлює, чи буде зображення прокручуватися разом з документом або займе фіксоване положення (fixed, scroll, local).

Якщо ви завантажили невеликий шматочок зображення і хочете розмножити його по всій сторінці, тоді використовуйте команду background-repeat - вона встановлює, як буде повторюватися зображення (repeat-x, repeat-y, space, round, no-repeat).

Тепер торкнемося файлу CSS

Якщо у вас сайт містить багато сторінок, то цей файл обов`язково повинен бути присутнім. З нього все сторінки беруть стилі і умови для відображення в браузері. Наприклад, ви вирішили поміняти колір або розмір шрифту відразу у всіх сторінках. Тоді просто вносите одна зміна в файл CSS і зміни торкнуться всіх сторінок.

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

.blokbg1 {
background-image: url ( `/ images / uzor.jpg`);
background-repeat: repeat;
background-attachment: scroll;
}