Как да добавите фоново изображение към уеб страница. Фонова картина

За да създадете уебсайт, важен въпрос е как да направите фон в html. Тази процедура включва използването на определени тагове - кодови думии писма. Благодарение на тях можете да поставите различен фон, да го направите едноцветен - да го запълните или да поставите произволна картина на мястото на фона. Такива действия ще бъдат много полезни за всички дизайнери на оформление и за тези, които решат да „облекат“ уебсайта си сами.

Изработване на фона

Преди да направите html фон на уебсайта, трябва да го отворите текстов редактор html кодстраници. Трябва да запомните, че етикетите на страницата са разположени вертикално. След това между таговете … , трябва да поставите етикет- тези етикети са необходими за изясняване на стила на елементите на дадена уеб страница. На място три точкитрябва да напишете – тяло (фон:) . Това е параметър, който ви позволява да зададете различни стиловеза фон на страницата. Можете да извършите операцията по настройка на цвета по два начина. Първо:

Тяло (фон:#000000) – фонът на страницата вече трябва да е черен.

Този метод е подходящ и за задаване както на цвят, така и на картина като фон. След двоеточието можете да поставите или цветен код, или линк към картинката. Или можете да използвате метод, който означава само задаване на цвят - специфично запълване на страницата. След двоеточие трябва да напишете така наречения параметър – цвят. И след него поставете кода на самия цвят. Този метод е добър, ако го използвате като шаблон. Запишете го и го запазете, а когато е необходимо, задайте цвят и го поставете на страницата.

Можете да поставите вместо обикновен фон, снимка. Ако трябва да разберете: в html, как да направите картина като фон, тогава трябва да направите подобни операции. Напишете етикети, поставете тяло (фон: връзка към снимката). Трябва да помним, че самата картина може да бъде навсякъде. И на уебсайт в Интернет, но най-добре е да създадете папка в корена на документа. В папката, в която ще се съхранява цялата информация за страницата на сайта, трябва да създадете друга - за снимки. Операцията ще изглежда така:

Сега избраната от вас снимка ще бъде фон на цялата страница на сайта. Надяваме се, че разбирате как да направите фон в html. Просто опитайте и всичко определено ще се получи!

27.12.14 55,8K

Всяка стая ще изглежда много по-добре, ако подът й е покрит със скъп персийски килим. Така че защо вашият уебсайт е по-лош? Може би е време да „покриете“ пода му със скъп елегантен килим самостоятелно направен. Нека да разгледаме по-отблизо как да направите фон за уебсайт:

Фон за сайта

Случва се така стар дизайнВече ми писна от сайта. И искам нещо ново и вкусно. А нов дизайнЩе бъде така, ако го приготвите със собствените си ръце.

Но пълната промяна на целия дизайн на даден ресурс сами е неблагодарна задача. И не всички ръце са правилно обучени за тази задача. Следователно най-лесният начин да опресните стар шаблон е да промените фонов цвятресурс или негов фоново изображение.

Има няколко начина за промяна на фона на уебсайт. За тази цел се използват CSS функцииили html. Но много от свойствата за работа с фона имат същото име и метод на приложение в тези уеб технологии.

Основи на работа с фонове в html

Като фон могат да се използват няколко елемента:

• цвят;
• Фоново изображение;
• Изображение на текстура.

Нека разгледаме по-подробно използването на всеки от тях.

За да зададете цвета фонЗа сайта се използва свойството background-color на атрибута style. Тоест, за да зададете основния цвят за уеб страница, трябва да го напишете вътре в тага . Например:

Фон на уебсайт #55D52B

освен шестнадесетичен кодцветовете са поддържани стойности в ключова дума или RGB формат. Примери:

RGB фон на уебсайта (23,113,44)

Зелен фон на уебсайта

Задайте цвета на фона с помощта на ключови думиима редица ограничения в сравнение с другите два метода.

HTML поддържа само 16 ключови думи за задаване на цветове. Ето няколко от тях: бяло, червено, синьо, черно, жълтои други.

Следователно, за да зададете фон за html уебсайт, е по-добре да използвате шестнадесетичен или RGB формат.

В допълнение към избора на цвят са налични и други опции за персонализиране. Ако свойството background-color е зададено на transparent, фонът на страницата ще стане прозрачен. Това е смисълът този имотзададени по подразбиране.

Сега нека да разгледаме възможностите на хипертекстовия език за настройка на фоново изображение за сайт. Това може да стане с помощта на свойството background-image.

Както можете да видите от кода, изображението е свързано чрез url пътя, посочен в скоби. Но не всички картини са толкова големи, че размерът им да запълни цялата площ на екрана. Да видим как ще се покаже по-малката картинка.

Да предположим, че разработваме уебсайт за поезия и трябва да използваме изображение на Пегас като фон. Крилатият кон ще олицетворява свободата на творческата мисъл на поета!

Трябва изображението да се покаже в средата на екрана веднъж. Но, за съжаление, браузърът не разбира нашите възвишени желания. И показва по-малко изображение за фон на сайта толкова пъти, колкото площта на екрана може да побере:

Може би четири усмихнати коня с крила ще бъдат твърде много вдъхновение за поетите. Затова забраняваме клонирането на нашия Пегас. Правим това с помощта на свойството background-repeat. Възможни стойности:

• repeat-x – повторете фоновото изображение хоризонтално;
• repeat-y – вертикално;
• повторение – по двете оси;
• no-repeat – повторението е забранено.

Сред изброените опции се интересуваме от последната. Преди да променим фона на сайта, ние го използваме в нашия код:

Но, разбира се, би било по-добре нашата листовка да се намира в средата на екрана. Свойството background-position е предназначено точно за позициониране на фоновото изображение на страницата. Можете да зададете координати на местоположението по няколко начина:

• ключова дума ( горе, долу, център, ляво, дясно);
• Процент – броенето започва от горния ляв ъгъл;
• В мерни единици (пиксели).

Нека се възползваме от най-много прост вариантцентриране:

Случва се да трябва да фиксирате позицията на картина при превъртане. Ето защо, преди да направите изображение като фон на сайта, използвайте специалното свойство background-attachment. Стойностите, които приема са:

• свитък;


• фиксирани.

Имаме нужда от последната стойност. Сега нашият примерен код ще изглежда така:

Текстурен фон на уебсайта

В първия пример използвахме голям и красив пустинен пейзаж за фон. Но трябва да платите напълно за такава красота. Тегло на изображението, направено в високо качество, може да достигне няколко мегабайта.

Този обем по никакъв начин не влияе върху скоростта на зареждане на страницата в браузъра, когато високоскоростна връзкас интернет. Но какво да кажем за мобилен интернет, което ще отнеме много време за зареждане на няколко „метра“?

В тази публикация ще ви разкажа както обикновено задайте фона на сайтаизползване HTMLкод.

Ще ви покажа и един отличен външна службавърху избора на безшевни фонове.
В днешно време настройките на сайта стават по-лесни и удобни чрез CMS конзоли като WordPress.
Може да се наложи да промените шаблоните за продажба на уебсайтове, тази статия ще ви помогне с това.

Ако не знаете какво е HTML, то това най-общо може да се нарече език на сайтовете или набор от правила, по които се генерират сайтове.

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

Задайте плътен цвят на фона на страницата.

За да инсталирате фон във формата плътен цвят , трябва да маркирате добавяне на атрибут bgcolor.

< html >
< head >
< title >Заглавие на страницата.

< body bgcolor = "#ffcc00" >

Вие можете този кодвмъкнете в текстов файли запазете с разширение .html. След това го отворете с произволен браузър и вижте резултата.

Както вероятно се досещате, цветът на фона се появява поради цветовия код в атрибута bgcolor= "стойност", който можете да намерите, като последвате този линк.

Задаване на изображение на фона на HTML страница.

За да се настройте изображението на фон, можете да използвате атрибута фонв етикета .

< html >
< head >
< title >Заглавие на страницата.

< body background = "http://сайт/images/mlmsecret.jpg" >здравей Това е първата ми страница.

Може да забележите, че атрибутът фоне равен на пътя на файла, който се използва като фон.

За да промените бързо фона или която и да е картина на страницата, просто посочете нов начинкъм вашия файл с помощта на текстов редактор.

За да разберете предишния път, на страницата с изображението щракнете върху изображението щракнете с десния бутони кликнете върху „Копиране на URL адрес на изображение“. по този начин ще видите името на картината/фона. След това можете просто да замените старото изображение със свое, като използвате същото име на файл.

Това бяха най-простите основи за настройка фон в html, сега идва интересната част. 🙂

Съвременните браузъри ви позволяват да добавяте към елемент произволно числофонови изображения, изброяващи параметрите на всеки фон, разделени със запетаи. Достатъчно е да използвате свойството универсален фон и да посочите един фон за него първо и втория, разделени със запетая.

Как да разтегнете фона до цялата ширина на прозореца?

За да мащабирате фона, използвайте свойството background-size; задайте неговата стойност на 100%, тогава фонът ще заема цялата ширина на прозореца на браузъра. За по-стари версии на браузъри трябва да използвате специфични свойства с префикси, както е показано в пример 1.

Как да добавите фоново изображение към уеб страница?

За да добавите фоново изображение към уеб страница, задайте пътя до изображението в рамките на url стойността на свойството за стил на фона, което от своя страна се добавя към селектора на тялото.

Възможно ли е да се направи анимиран фон?

Анимацията е доста мощна техника, която може да вдъхне живот на всеки документ, така че не е изненадващо, че технологията Flash, която добавя интерактивни карикатури към уеб страниците, стана изключително популярна. Графичен формат GIF също поддържа проста анимациячрез последователна смяна на рамки. Така че с помощта на изображение в този формат е възможно не само да анимирате индивидуални снимки, но също и фона на уеб страница или конкретен елемент.

Първо трябва да създадете анимирана картина в GIF форматза какво можете да го използвате? Adobe програма Photoshop или друг подходящ за тази цел. Има и библиотеки от готови анимирани файлове, които могат да се използват като фоново изображение. След това изображението се добавя като фон с помощта на свойството стил на фона, както е показано в Пример 1.

Как да поставите фоново изображение в долния десен ъгъл на страницата?

За да контролирате позицията на фоновото изображение на страницата, се използва свойството background-position style, което едновременно задава хоризонталните и вертикалните координати на изображението. За да отмените повтарянето на фоново изображение, използвайте свойството background-position със стойност no-repeat.

Как мога да предотвратя повторението на фона?

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

Как мога да накарам фона да се повтаря само вертикално?

Повтарянето на фона обикновено се изисква за създаване на декоративни линии или градиенти, които са свързани с височината на елемент или прозорец на уеб страница. В такива случаи повтарянето на фона вертикално осигурява последователна картина, независимо от размера на елементите. Само в началото трябва да се уверите, че фоновото изображение се повтаря без шевове.

Цветът на фона е достатъчен важен елементвсяка уеб страница. Първо, задава желаното настроение и общото настроение на сайта, и второ, улеснява възприемането на текста.

Цветът на фона на уеб страницата се задава с помощта на атрибута bgcolor на тага .

Пример 1: Промяна на цвета на фона

Цветът може да бъде зададен като шестнадесетична стойност или чрез името си.

Въпреки факта, че можете да посочите произволен цвят за фона, повечето сайтове използват предимно бял фони черни букви, като най-утвърден вариант.

Фоново изображение

Можете да използвате всяко подходящо изображение като фон. Фонът не трябва да отвлича вниманието от текста, а трябва да се слива добре с негоцветова схема уеб страници и да са малки по размер, за да се зареждат бързо.Ако след горното все още искате да добавите .

фонова картина

към страницата, трябва да използвате атрибута background на маркера Пример 2: Добавяне на тапетекрана на монитора, той ще се възпроизвежда хоризонтално и вертикално.

Тъй като фоновото изображение се зарежда по-бавно от цвета на фона, може да се окажете с нечетлив текст за известно време, докато изображенията се заредят. Същото може да се случи, ако снимките са деактивирани в браузъра. Поради това се препоръчва винаги да задавате цвета на фона заедно с фоновото изображение (пример 3).

Пример 3: Използване на фоново изображение и фонов цвят

Фиксиран фон

По подразбиране, когато използвате лентата за превъртане, фоновото изображение се движи със съдържанието на уеб страницата. Internet Explorerви позволява да направите фона неподвижен, като използвате атрибута на етикета bgproperties ="fixed". .

Пример 4: Задаване на фиксиран фон

Като посочите атрибута bgproperties, както е показано в пример 4, фоновото изображение на уеб страницата ще остане неподвижно, но текстът, графиките и други елементи ще се движат с лентата за превъртане.