Перший текст

Другий текст

У html фон для сайту не задають, це пишеться через css-стилі, але це лише теоретична формальність. А тепер давайте дізнаватися, як це тло визначати.

Фон для сайту або окремого блоку

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

Body( Background-color: white; )

Тобто ми звертаємося до тега body, який представляє всю нашу сторінку. Для завдання кольору фону використовується властивість background-color. Але що, якщо вам потрібно задати як фон малюнок, а не суцільний колір? Тоді варто написати так:

Body( Background-image: url(шлях до малюнка.розширення малюнка) )

Для наочності я пропоную розглянути все на прикладі. Для цього я використовуватиму таку картинку:

Наприклад, background-image: url(comp.png). У цьому прикладі ми задали фонову картинку з ім'ям comp (саме так я її назвав) формату png, що лежить у тій же папці, що й css-файл.
У html створимо довільний блок із конкретними розмірами, щоб на ньому демонструвати роботу css-властивостей.

І ось для нього стилі:

#ct( Background-image: url(comp.png); width: 600px; height: 400px; )

Ось що в нас вийшло:

Чому так? Справа в тому, що за замовчуванням браузер повторює картинку стільки разів, щоб повністю заповнити блок. Іноді так і потрібно, наприклад, при використанні безшовних орнаментів, але в нашому випадку має бути одна картинка. На щастя, цим можна легко керувати.

Повторення тла

Якщо у вас картинка як фон, то за умовчанням вона повторюватиметься по горизонталі та вертикалі, щоб заповнити весь простір сторінки. Щоб прибрати, використовується властивість background-repeat і його значення no-repeat (не повторювати). Також є такі значення:

• Repeat-x – повторювати лише по горизонталі
• Repeat-y – тільки за вертикаллю

Допишемо властивості нашого графічного тла:

Background-repeat: no-repeat;

Позиція

Властивість background-position визначає місце, де знаходитиметься картинка. Тут задається два значення – по горизонталі та вертикалі. Приклади: background-position: right bottom – позиція у правому нижньому кутку, top-left – у нижньому верхньому (і так за замовчуванням), 250px 500px – зміщення від лівого верхнього кута вправо на 250 пікселів та вниз на 500.

Давайте краще подивимося на прикладах:

Background-position: top right;

Зображення переміститися у верхній правий край. Я дав блоку також жовте тло, щоб було видно його краї.

background-position: 50%; 50%;

Зображення з'явилося по центру у своєму блоці. Так-так, таке теж можливе завдяки процентному запису позиції.

background-position: 70% 20%;

Фон зміщений на 70% по горизонталі і на 20 по вертикалі.

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

Закріплення фону

Ще мені дуже подобається одна властивість, яка називається background-attachment. У нього є лише два значення і перше стоїть за умовчанням (scroll). Це означає, що при прокручуванні сторінки фон теж прокручуватиметься, а якщо ви використовуєте картинку без повторень, то врешті-решт вона закінчиться і далі піде просто суцільний колір.

Щоб цього не сталося, прописується background-attachment: fixed і тепер наше тло надійно зафіксовано на місці. Це можна порівняти з тим, як блоку визначити фіксоване позиціонування і він не зникатиме зі сторінки під час її прокручування.

Скорочений запис всього цього добра

Ми з вами розібрали багато властивостей, які дозволяють зробити фон, але якщо їх все застосовувати, то виходить громіздкий запис. Є дуже елегантне рішення. Властивість background дозволяє через пропуск записати потрібні налаштування в такому порядку:
Background: колір зображення повторення закріплення позиції;
І тепер все можна записати так:

Background: yellow url(comp.png) no-repeat 20% 100px;

Якщо якусь властивість визначати не потрібно, воно просто опускається (у нашому випадку ми не записали background-attachment).

Багато фонів

А що робити, якщо вам потрібні кілька фонових картинок? Буває, що ж вдієш. Сьогодні css підтримує таку можливість. Давайте і спробуємо. Візьмемо таку іконку

Я закликав її ноутбук.

І ось код для вставки мультифону:

Background: url(comp.png) no-repeat 20% 100px, url(laptop.png) no-repeat 50% 50%; background-color: yellow;

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

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

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

Всім привіт! На зв'язку з вами ваш покірний слуга з порцією корисного та практичного матеріалу на тему, як встановити фон для сайту. Це саме початок у html верстці і тут я наочно продемонструю на прикладі як можна зробити гарне тло для сайту, який однозначно зачепить інтернет користувача і додасть оригінальності.

Якщо ви звернули увагу, то більшість інтернет-бізнесменів використовують у своїх продаючих сторінках і сторінках підписки унікальне тло. Ось сьогодні ми розберемо технічну складову цього процесу.

Отже, для початку нам потрібна, звичайно, картинка. У зарубіжному інтернеті є один дуже гарний сайт, на якому ви можете скачати безкоштовно різні картинки для фону сайту. Їх там просто безліч. Сайт має назву Subtle Patterns.

Він відображається у списку пошуковика Google на першому місці, тому в роботі рекомендую саме його. Також ви можете знайти велику кількість інших сайтів, якщо наберете в пошуковику приблизно такі словосполучення "background image patterns", "download background image for site" і так далі.

У кого з англійською проблем немає, то ви розберетеся без труднощів.

У цій статті я вибрав тему і називається вона tweed. Завантажити ви можете її.

Ось як вона виглядає у невеликому варіанті на сайті

На початку створюємо новий документ у програмі

І обов'язково перед його редагуванням зберігаємо під ім'ям, наприклад index.htmlі створюємо папку на комп'ютері, наприклад можна створити папку My site і вже в неї поміщати наш індексний файл (index.html). Краще створювати папку англійською мовою, щоб не було плутанини у браузера і некоректного відображення сайту.

Крім цього в головній папці "my site" вам потрібно створити ще дві підпапки, в одне ми будемо поміщати всі наші картинки і називатися вона буде "images", а інший дамо назву "CSS" (каскадні таблиці стилів) і помістимо туди файл style.css

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

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

У тезі title можна змінити назву документа, наприклад, зробити «Моя перша веб-сторінка». І переконайтеся, що ваша сторінка збережена в кодуванні UTF - 8

В іншому випадку, якщо буде стояти інше кодування, наприклад windows-1251, то текст документа в браузері відображатиметься ієрогліфами. Змінити кодування можна у розділі «Кодіювання – Кодувати в Utf-8 (без BOM)» на панелі інструментів програми.

І не забуваємо кожну нашу дію зберігати.

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

Таким чином, ви привчіть себе до правильного порядку дій. Не варто прямо в HTML документі займатися стилями, краще винесіть їх в окремий документ.

Для цього в нашій програмі Notepad++ створимо ще один файл і назвемо його Style.css та збережемо його в новій папці css, яка буде знаходитись у спільній папці «My site»

Чудово! Щоб наш браузер правильно відобразив сторінку, нам необхідно підключити таблицю стилів у наш html документ. Ось як це робиться

Прямо повністю вводимо весь рядок над . Цим рядком ми підключаємо таблицю стилів.
Тепер для нашого тега body визначимо фонову картинку через таблицю стилів. Для цього ми у документі style.css створюємо наступну структуру (прямо також берете та пишіть у коді програми)

Тут трохи поясню. У атрибута background є багато значень, одне з яких background-repeat, яке відповідає саме за те, щоб розтягнути нашу фонову картинку для веб-документа.

BACKGROUND-REPEAT:

REPEAT //(розтиражувати по горизонталі та вертикалі) REPEAT-X // (розтягнути тільки по горизонталі) REPEAT-Y //(розтягнути тільки вертикалі) NO-REPEAT //(не повторювати фонову картинку)

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

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

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

Як розтягнути фон на всю ширину вікна?

Для масштабування фону призначено властивість background-size, як його значення вказується 100%, тоді фон займатиме всю ширину вікна браузера. Для старих версій браузерів слід використовувати специфічні властивості префіксів, як показано в прикладі 1.

Як додати фоновий рисунок на веб-сторінку?

Щоб додати фонову картинку на веб-сторінку, задайте шлях до зображення всередині значення url стильової властивості background , яке додається до селектора body .

Чи можна зробити анімоване тло?

Мультиплікація це досить сильний прийом, здатний пожвавити будь-який документ, тому не дивно, що величезної популярності набула технологія Flash, яка додає на веб-сторінки мультики, до того ж інтерактивні. Графічний формат GIF також підтримує найпростішу анімацію шляхом послідовної зміни кадрів. Так що використовуючи зображення в цьому форматі можна анімувати не тільки окремі картинки, але також фон веб-сторінки або певного елемента.

Спочатку потрібно створити анімовану картинку у форматі GIF, для чого можна скористатися програмою Adobe Photoshop або іншою відповідною для цієї мети. Також існують бібліотеки готових анімованих файлів, які можна використовувати як фонову картинку. Далі зображення додається як тло за допомогою стильової властивості background , як показано в прикладі 1.

Як помістити фоновий малюнок у правий нижній кут сторінки?

Для керування положенням фонового малюнка на сторінці застосовується стильова властивість background-position, вона одночасно встановлює координати зображення по горизонталі та вертикалі. Щоб скасувати повторення фонової картинки, використовується властивість background-position зі значенням no-repeat .

Як зробити, щоб фон не повторювався?

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

Як зробити, щоб фон повторювався лише по вертикалі?

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

Багато верстальників-початківців, які тільки вникають у суть створення сайтів, часто задаються питанням, як у html зробити фон картинкою. І якщо деякі і можуть розібратися з цим завданням, все одно виникають проблеми під час розтягування зображення на всю ширину монітора. При цьому хотілося б, щоб сайт однаково відображався на всіх браузерах, тому має виконуватися вимога кросбраузерності. Можна встановити фон двома способами: за допомогою та CSS стилю. Кожен сам для себе вибирає найоптимальніший варіант. Звичайно, CSS стиль набагато зручніший, адже його код зберігається в окремому файлі і не займає зайві колонки в основних тегах сайту, але перш за все розглянемо простий метод встановлення зображення на тлі сайту.

Основні теги HTML для створення фону

Отже, переходимо до питання, тлом у HTML на весь екран. Для того, щоб сайт красиво виглядав, необхідно розуміти одну досить важливу деталь: досить просто зробити градієнтний фон або зафарбувати його однотонним кольором, але якщо вам необхідно вставити на задній план картинку, вона не розтягуватиметься на всю ширину монітора. Зображення спочатку потрібно підібрати або самостійно зробити дизайн з таким розширенням, в якому у вас відображатиметься сторінка сайту. Тільки після того, як фонове зображення готове, переносимо його до папки під назвою «Images». У ній ми зберігатимемо всі використовувані картинки, анімації та інші графічні файли. Ця папка повинна знаходитись у кореневому каталозі з усіма вашими файлами html. Тепер можна переходити до коду. Існує кілька варіантів запису коду, за допомогою якого фон змінюватиметься на картинку.

1. Написати атрибутом тега.
2. Через CSS стиль у HTML коді.
3. Написати стиль CSS в окремому файлі.

Як у HTML зробити фон картинкою, вирішувати вам, але хотілося б сказати пару слів про те, як було б найбільш оптимально. Перший метод за допомогою написання через атрибут тега вже давно застарів. Другий варіант використовується в дуже поодиноких випадках, тільки тому що виходить багато однакового коду. А третій варіант найпоширеніший і найефективніший. Ось HTML приклади тегів:

1. Перший спосіб запису через атрибут тега (body) у файлі index.htm. Він записується в такому вигляді: (body background = "Назва_папки/Назва_картинки.розширення")(/body). Тобто якщо у нас картинка з назвою «Picture» та розширенням JPG, а папку ми назвали як «Images», тоді запис HTML-коду буде виглядати так: (body background="Images/Picture.jpg")… (/body) .
2. Другий метод запису стосується CSS стиль, але записується в тому ж файлі з назвою index.htm. (body style="background: url("../Images/Picture.jpg")").
3. І третій спосіб запису виконується у двох файлах. У документі з назвою index.htm записується такий рядок: (head)(link rel="stylesheet" type="text/css" href="Шлях_до CSS_файлу")(/head). А у файлі стилів із назвою style.css вже записуємо: body (background: url(Images/Picture.jpg)).

Як у HTML зробити тло картинкою, ми розібрали. Тепер потрібно зрозуміти, як розтягнути картинку по ширині всього екрана.

Способи розтягування фонової картинки на ширину вікна

Представимо наш екран у відсотковому вигляді. Виходить, що вся ширина та довжина екрану становитиме 100% х 100%. Нам потрібно розтягнути картинку на цю ширину. Додамо до запису зображення у файл style.css рядок, який і розтягуватиме зображення на всю ширину та довжину монітора. Як це записується у CSS стилі? Все просто!

background: url(Images/Picture.jpg")

background-size: 100%; /* такий запис підійде для більшості сучасних браузерів */

Ось ми і розібрали, як зробити картинку тлом у HTML на весь екран. Є ще спосіб запису у файлі index.htm. Хоч цей метод і застарілий, але для новачків необхідно знати і розуміти його. У тезі (head)(style) div (background-size: cover; ) (/style) (/head) цей запис означає, що ми виділяємо спеціальний блок для фону, який буде позиціонуватися по всій ширині вікна. Ми розглянули два способи, як зробити фон сайту картинкою html, щоб зображення розтягувалося на всю ширину екрана в будь-якому з сучасних браузерів.

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

Якщо ви вирішили використовувати картинку як тло майбутнього веб-ресурсу, тоді вам просто необхідно дізнатися, як його зробити нерухомим, щоб він не розтягувався в довжину і не псував естетичний вигляд. Досить просто за допомогою прописати цей невеликий додаток. Вам необхідно у файлі style.css дописати одну фразу після background: url(Images/Picture.jpg") fixed; або замість неї додати після крапки з комою окремий рядок - position: fixed. Таким чином, ваш фоновий малюнок стане нерухомим. прокручування контенту на сайті, ви побачите, що текстові рядки рухаються, а фон залишається на місці.Ось ви і навчилися, як у html зробити фон картинкою, декількома способами.

Робота з таблицею в HTML

Багато недосвідчених веб-розробників, стикаючись з таблицями і блоками, часто не розуміють, як у html зробити картинку тлом таблиці. Як і всі і CSS стилю, ця мова веб-програмування досить проста. І рішенням такого завдання буде написання кількох рядків коду. Ви повинні знати, що написання табличних рядків і стовпців позначається відповідно як теги (tr) і (td). Щоб фон таблиці зробити як зображення, необхідно дописати до тегу (table), (tr) чи (td) просту фразу із посиланням на картинку: background = URL картинки. Для наочності наведемо кілька прикладів.

Таблиці з картинкою замість фону: HTML приклади

Намалюємо таблицю 2х3 і зробимо її фоном картинку, збережену в папці "Images": (tbl) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так, наша таблиця буде зафарбована у фон картинки.

Тепер намалюємо цю ж табличку розмірами 2х3, але вставимо картинку в стовпчики під номером 1, 4, 5 і 6. (table)(tr)(td background = “Images/Picture.jpg”) (/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5( /td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). Після перегляду бачимо, що фон з'являється тільки в комірках, в яких ми прописали, а не у всій таблиці.

Кросбраузерність сайту

Існує ще таке поняття, як кросбраузерність веб-ресурсу. Це означає, що сторінки сайту однаково правильно відображатимуться у різних типах та версіях браузерів. При цьому потрібно HTML код і CSS стиль підганяти під потрібні браузери. Крім того, в сучасний час розвитку смартфонів багато веб-розробників намагаються створити сайти, адаптовані під мобільні версії і під комп'ютерний вигляд.