Як додати фонове зображення в HTML
Ви можете прикрасити ваш веб-сайт, додаючи фонове зображення на ваші веб-сторінки. У цій короткій статті, ви дізнаєтеся основи того, як додати фонове зображення на ваш веб-сайт. Тут, поєднуються CSS (Cascading Style Sheet) з HTML, щоб вийшов оптимальний результат. HTML використовується для створення структури веб-сторінки, в той час, коли CSS працює над її стилем.
Кроки
1
Відкрийте основною.css файл в редакторі ваших розробок. Основний .css файл містить список CSS класів / ids, що відносяться до області основного змісту веб-сторінки в алфавітному порядку. Ви не повинні відхилятися від цих класів. IDs розташовані відразу за класами - теж в алфавітному порядку.- [b]Чи не думайте, що це спрацює: Безліч веб-сайтів пропонують попередньо створені Div overlay, з інструкціями про те, як використовувати ваші зображення і інше, і де "вставити" відповідний код.
- [b]Знайте, що структура веб-сайту визначається CSS класами для HTML елементів. Ці класи, також містять інформацію про те, як виглядатиме фінальний варіант, створений HTML документом. Використовуйте HTML для утримання (контенту) - CSS для зовнішнього вигляду. Переглядався закодований в HTML, і нові структури будуть обмежені в стилі CSS класами і IDs. Фінальний документ буде побудований за результатами застосування класів до HTML структурі.
2
Створіть і встановіть фонове зображення, як частина тега BODY, для будь-якої сторінки даного.css файлу. У самому верху CSS документа (у вашому відкритому файлі), ви можете додати код, схожий з тим, який представлений нижче.- Виняток, CAVEAT: Очевидно, це зображення може бути проігноровано в HTML, якщо таблиця стилів самостійно задає фон. Ви можете виставити достатньо простий фон, задаючи біле або тоноване фонове зображення (біла або тонована плитка), встановлене в таблицю стилів, або сама таблиця дозволяє установку фону в одному зі стилів, представлених нижче.
- BODY {text-align: center- background: url (img / name_of_picture.jpg) center-} / * тут, ви можете залишити коментар * /
- Якщо ви використовуєте велике зображення, яке може покрити сторіночку повністю, то в попередньому прикладі додайте "no-repeat", після "center". Інакше, зображення буде повторюватися, заповнюючи ваш фон.
3
Ви можете досягти цього результату кількома способами. Кілька прикладів:- BODY {background: url (banner.jpeg) 50% 0%}
- BODY {background-image: url (banner.jpeg) - background-position: top center-}
- BODY {background: url (banner.jpeg) top left}
- BODY {background: url (banner.jpeg) 0% 0%}
- P {background: URL (chess.png) gray 50% repeat fixed}
4
Поставте потрібний URL і назва файлу в зазначеному місці, також, як адресу та назву зображення.
5
Перевіряйте результат: після того, як ви введете один з представлених вище прикладів, збережіть ваш документ, і відкрийте веб-сайт, щоб перевірити отриманий результат!
Типи стилів:
1
Навчитеся використовувати ці стилі, уникаючи надлишкові і розкидані методи-іншими словами, централізується ваш код:
Уникайте "inline-стилі", які записуються в тегах вашого документа. Inline-стилі впливають тільки на ті теги, в яких вони зазначені, наприклад: Уникайте "вбудовані стилі", які вбудовані в "голову" кожного документа. Зрозумійте, що вбудовані стилі є зайвими. Вони повторюються і впливають тільки на ті теги, в яких вони записані, наприклад: Робіть посилання на зовнішні стилі, які описані в окремому документі і пов`язані з різними сторінками веб-сайту, для спрощення програмування на кожній сторінці. Таблиці зовнішніх стилів можуть впливати на будь-який документ, з яким вони пов`язані, наприклад:
1
Використовуючи кращі методи роботи з CSS, які рекомендуються для заголовків і тексту (банерів сторінок, колон, шрифтів, розмірів і зовнішнього вигляду), а також для зображень (розміри, межі, закруглені кути, і так далі) в таблицях зовнішніх стилів для відображення пов`язаних веб-сторінок на вашому веб-сайті, ви звужуєте ваш код і прискорюєте завантаження сторінок.
2
Використовуйте каскадні таблиці стилів, щоб перекидати спадковість на будь-яку сторінку, пов`язану з цим стилем CSS коду. Звичайно, ви можете використовувати більше, ніж одну таблицю стилів для різних сторінок (головна, галерея, статті, списки, і так далі), але зауважте, що вони можуть бути об`єднані, тільки якщо стилі та IDs послідовні, обмежені і викликаються там, де потрібно.
Поради
- "Div overlay стають найбільш популярним способом прикраси облікових записів MySpace, без особливого знання HTML. Використання попередньо створеної Div overlay залежить від того, де ви бажаєте використовувати код. Існують кілька веб-сайтів, які пропонують попередньо створені коди Div overlay, і навіть такі веб -ресурси, які допомагають зі створенням власної. Вам не обов`язково мати великий досвід з HTML, але важливо розуміти його основи, для використання разом з CSS.
- Вбудовування - в цифрових технологіях - це використання тексту, зображення, звуку, https://cityadspix.com/click-BQB3V890-SLZKVXTQ?bt=20pt=9lt=1tl=1 "target =" _ blank "title =" dokolena.ru " style = ""> відео або комп`ютерного коду в комп`ютерному файлі, HTML документі, програмному продукті, або електронному пристрої: щоб вбудувати "зображення в ваш веб-сайт" - щоб вбудувати "програмне забезпечення в машинах і літаках для роботи двигуна, моніторингу або для навігації, і так далі. "
- Щоб встановити фон, можливо, вам доведеться змінити стиль самої сторінки.
Попередження
- Ваші зміни можуть бути відхилені у зв`язку з настройками CSS файлу.
