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

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

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

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

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

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

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

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

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

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

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

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

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

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

26.11.2016 04.02.2018

Цей урок розповість про те, як у фотографії прибрати фон і вставити новий у фотошопі. Я опишу досить простий, вірний і швидкий спосібзаміни зображення.

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

План виконання уроку

• Відкрити у фотошопі фотографії на якій буде заміна фону та відкрити фотографію нового фону
• Вирізати старий фон на фото
• Копіювати нове тло і вставити у фото
• Підкоригувати кольори, рівні

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

Підготовка до виконання

Якщо ви хочете потренуватися на цих фотографіях, скачайте їх:

Ви також можете використати свої фотографії або знайти інші в інтернеті.

Крок 1

Відкрийте у фотошопі фотографії. Перейдіть до фото, на якому замінюватимемо фон.

Крок 2

Створюємо копію шару.

Оскільки шар за замовчуванням знаходиться по замку від редагування, необхідно зробити його копію. Виділити шар та натисніть CTRL+Jна клавіатурі, щоб вийшла копія. Старий шар можна приховати, натиснувши на іконку вічка.

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

Крок 3

Тепер нам необхідно виділити людей, а саме закохану пару на фотографії.

Ми ж використовуватимемо інструмент Швидке виділення.

Принцип його дії простий. Ви як пензлем показується де виділяти і фотошоп створює виділення.

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

Якщо у вас складніша фотографія і не виходить виділити, то застосуйте всі знання з .

Порада:Щоб виділення об'єктів виходило більш рівним, необхідно змінювати розмір пензля в процесі роботи.

Зрештою, ви повністю повинні виділити парочку.

Крок 4

Тепер позбавляємося старого фону. Для цього інвертуйте виділення, яке у вас вийшло, натиснувши SHIFT+CTRL+I(або меню Виділення - Інверсія). Після цього виділиться все, що навколо людей чи тло. Натисніть Del (Delete) на клавіатурі щоб фон вийшов.

Наразі люди вийшли на прозорому тлі.

Крок 5

Вставляємо нове тло. Відкрийте зображення з новим фоном. Виділіть всю область зображення, можна натиснути CTRL+Aі скопіюйте, натиснувши CTRL+C.

Перейдіть на фотографію.

Створіть новий шар під фото. SHIFT+CTRL+Nабо просто клацніть на іконці створення шару.

Тепер, коли новий шар створено, натисніть CTRL+Vщоб вставити зображення нового тла.

Фонове зображення вставилося, але воно може бути надто велике по відношенню до фотографії.

Тому натисніть CTRL+Tщоб коригувати масштаб та зменшіть зображення до потрібних розміром.

У результаті вийде приблизно так:

Крок 6

Все відмінно, але потрібно трохи підкоригувати глибину кольору людей, так би мовити, трохи підігнати до нового фону.

Для цього виберіть шар із людьми та натисніть CTRL+Lщоб викликати функцію рівні.

Потім трохи зображення.

Тепер фотографія з новим тлом виглядає реалістичніше:

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

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

У цьому записі я розповім, як завжди встановлюють фон на сайтз застосуванням HTMLкоду.

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

Якщо ви не знаєте, що таке ХТМЛ, то це узагальнено можна назвати мовою сайтів або набором правил, за якими генеруються сайти.

Наприклад, ви бачите картинку на сайті, коли в HTML коді сторінки це може виглядати так:

Встановити суцільний колір на сторінці фону.

Для того, щоб встановити фон у вигляді суцільного кольорупотрібно в тег додати атрибут bgcolor.

< html >
< head >
< title >Заголовок сторінки.

< body bgcolor = "#ffcc00" >

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

Як ви напевно здогадалися, колір фону з'являється за рахунок коду кольору в атрибуті bgcolor = "значення", який можна підібрати, перейшовши за цим посиланням.

Встановити зображення на тлі HTML сторінки.

Для того щоб встановити на тлі зображення, можна використовувати атрибут backgroundу тезі .

< html >
< head >
< title >Заголовок сторінки.

< body background = "http://сайт/images/mlmsecret.jpg" >Вітання. Це моя перша сторінка.

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

Щоб швидко змінити фон або будь-яку картинку на сторінці, достатньо вказати новий шлях до файлу, використовуючи текстовий редактор.

Щоб дізнатися колишній шлях, необхідно на сторінці з картинкою, натиснути на картинку правою кнопкоюі клацнути по "Копіювати URL картинки." таким чином ви побачите назву картинки/фону. Потім ви можете просто замінити колишню картинку своєї, використовуючи ту ж назву файлу.

Це були найпростіші основи з налаштування фону в html, Тепер найцікавіше. 🙂

2 голоси

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

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

Вибір картинки

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

На жаль, розтягнути зображення в HTML на весь екран неможливо. Фото використовується у натуральну величину. Якщо картинка маленька, вона замостить всю площу, як у скріншоті внизу. Щоб розтягнути картинку, доведеться створити додатковий css документ, без цього не вийде.

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

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

Якщо вас цікавлять відсутність юридичних наслідків за їх використання, то я рекомендую пошукати на сайті Pixabay.com .

Html

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

Отже, ви можете працювати в блокноті, я віддаю перевагу NotePad ++. У ньому працювати набагато зручніше: код дописують за тебе, теги підсвічуються. Програма безкоштовна і важить близько 3 Мб. Дуже рекомендую, особливо якщо ви новачок.

Отже, у тег bodyвам необхідно додати атрибут backgroundі вказати посилання на зображення, звідки буде взято зображення. Ось як це виглядає у програмі.

Можете просто відкрити блокнот і скопіювати цей код. У лапках поставте посилання на ту картинку, яка вам подобається.

<html > <head > <title > Background-image</ title > </ head > <body background = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </ body > </ html >

Хотілося б відзначити для новачків, який момент. Якщо ви берете зображення з pixabay, посилання вставляти потрібно не на сторінку з картинкою, а відкрити малюнок в сусідній вкладці.

Копіюйте саме цей URL.

Збережіть документ. Не забувайте, що якщо ви використовуєте блокнот, потрібно використовувати розширення .html . Просто назвіть документ, наприклад, back.html . Інакше він збережеться як текстовий документі браузер просто не зрозуміє, що потрібно робити.

Готово, сторінка залита іншим кольором.

Якщо ви хочете дізнатися більше про html, я раджу вам завантажити безкоштовний курсЄвгенія Попова . З нього ви дізнаєтеся більше тегів, можливостей мови, спробуєте деякі нові прийоми і більше знатимете.

Не скажу, що курси Євгена Попова мають шалену популярність. Багато фахівців лають його і якщо ви натикалися на подібні висловлювання, то ось вам моя думка. Ці уроки надаються безкоштовно і, незважаючи на це, вони чудово справляються зі своїм основним завданням – показати новачкові основи, ввести його в курс справи.

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

Чи не згодні зі мною? Можу запропонувати альтернативу. Книга Елізабет та Еріка Фрімен « Вивчаємо HTML, XHTML та CSS ». Не дуже нудний бестселер і випустився нещодавно, в 2016 році. Інформація застаріти ще не встигла.

CSS

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

CSS допомагає вирішити цю проблему. Вам потрібно створити файл з розширенням CSS і ввести наступний код:

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

Для тих, хто хоче знати краще

При допомоги cssви можете розтягнути background image, зробити так, щоб воно не повторювалося, додати gif-анімацію та багато іншого.

В одній статті всього не впишеш. Та й такого завдання я перед собою не ставив. Існує маса тонкощів і якщо вам обіцяють розповісти в одній статті про все, то це ніщо інше, як обман.

Бажаєте навчитися правильно писати сайти? Я рекомендую вам вивчати мови програмування. Можу порадити курс Андрія Бернацького « HTML5 та CSS3 з Нуля до Профі ». Мені дуже подобається цей автор. Я не проходив саме цей курс, кілька років тому було вже щось аналогічне, але менш сучасне.

Автор дуже приємно розповідає, все легко та зрозуміло. Особливість цього курсу полягає в тому, що ви не просто вивчаєте, ви створюєте конкретний сайт разом із викладачем. В результаті ви отримаєте візитку, блог та навіть інтернет-магазин. Дуже круто. Можете подивитися перші три теоретичні уроки з HTML5 з цього курсу прямо тут і зараз.

До речі, разом із цим курсом ви отримуєте 7 бонусів: основи html та css Андрія Бернацького, верстка для початківців, створення лендінг пейдж за вечір та багато іншого. Перед тим як займатися серйозним навчанням, помацайте безкоштовний курс. Практика HTML5 та CSS3 ».

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

У 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;

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

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

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