Направете css фон на цяла страница. Как да зададете цвят на фона в HTML

В html фонът за сайта не е зададен, пише се чрез css стилове, но това е само теоретична формалност. И сега нека да разберем как да дефинираме този фон.

Фон за сайт или отделен блок

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

Тяло (
Цвят на фона: бял
}

Тоест ние се позоваваме на тага body, който представлява цялата ни страница. Свойството background-color се използва за задаване на цвета на фона. Но какво ще стане, ако искате да зададете фона на графика вместо плътен цвят? Тогава трябва да напишете така:

Тяло (
Фоново изображение: url (път към изображението. разширение за изображение)
}

За по-голяма яснота предлагам да разгледаме всичко по-подробно с пример. За това ще използвам следното изображение:

Например фоново изображение: url(comp.png) . В този пример ние задаваме фоново изображение, наречено comp (така го нарекох) в png формат, което е в същата папка като css файла.
В html ще създам произволен блок със специфични размери, за да демонстрирам работата на css свойствата върху него.

А ето и стиловете за него:

#ct(
фоново изображение: url(comp.png);
ширина: 600px
височина: 400px;
}

Ето какво получихме:

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

повтарящ се фон

Ако имате изображение като фон, то по подразбиране то ще се повтаря хоризонтално и вертикално, за да запълни цялото пространство на страницата. За да премахнете това, се използва свойството background-repeat и неговата стойност е no-repeat (не повтаряйте). Има и тези стойности:

• Repeat-x - повторете само хоризонтално
• Repeat-y - само вертикално

Нека добавим към свойствата на нашия графичен фон:

фоново повторение: без повторение;

позиция

Свойството background-position определя къде ще бъде поставено изображението. Тук са зададени две стойности - хоризонтално и вертикално. Примери: background-position: дясно дъно - позиция в долния десен ъгъл, горе-ляво - в долния горен (и така нататък по подразбиране), 250px 500px - изместване от горния ляв ъгъл надясно с 250 пиксела и надолу с 500

Нека разгледаме по-добре примерите:

позиция на фона: горе вдясно;

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

фон-позиция: 50% 50%;

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

фон-позиция: 70% 20%;

Фонът е изместен със 70% хоризонтално и 20% вертикално.

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

Закрепване на фона

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

За да предотвратите това да се случи, е записано background-attachment: fixed и сега нашият фон е сигурно фиксиран на място. Това може да се сравни с това как да дефинирате фиксирана позиция за блок и тя няма да изчезне от страницата, когато се превърта.

Съкратен запис на цялата тази доброта

Анализирахме много свойства, които ви позволяват да направите фон, но ако ги приложите всички, ще получите тромава нотация. Има много елегантно решение. Свойството background ви позволява да запишете необходимите настройки, разделени с интервал в този ред:
Фон: позиция за закрепване на повторение на цветно изображение;
И сега всичко може да се напише така:

Фон: жълт url(comp.png) без повторение 20% 100px;

Ако някое свойство не трябва да се дефинира, то просто се пропуска (в нашия случай не сме написали прикачване на фона).

Много фонове

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

Нарекох го лаптоп.

А ето и кода за вграждане на мултифона:

Фон: url(comp.png) без повторение 20% 100px,
url(laptop.png) без повторение 50% 50%;
цвят на фона: жълт

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

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

Тук бих искал да завърша тази статия. Можете да правите много други интересни неща с фона, ще се опитам да пиша за тях в бъдеще (и вече съм написал нещо - например). Успех с този имот.

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

• style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"

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

• background-repeat : „Стойност“. Опциите за вашата стойност могат да бъдат: "repeat-x" - повтаря фоновото ви изображение както хоризонтално, така и вертикално. "repeat-y" - повторете само вертикално. "no-repeat" - изображението е замръзнало на място и не се повтаря. "space" - цялата страница ще бъде запълнена с максимален брой копия на изображението, външните ще бъдат отрязани. "кръгли" - същата опция, но ръбовете на изображението ще бъдат точно мащабирани;
• background-attachment: "Стойност". Ако замените етикета „scroll“ вместо думата Стойност, тогава изображението ще се превърта заедно със сайта. „фиксирано“ - при превъртане фонът остава непроменен;
• фон-размер: Стойност Стойност2. Тук стойностите трябва да приемат стойност в пиксели. Например: 100px 200px. В допълнение към пикселите се приемат процентни стойности. Това е опция за запълване на страницата с изображение. В допълнение към числата, можете да въведете два параметъра: „ contain“ - запълва страницата с изображение по дългата страна и „cover“ - запълва страницата с изображение по ширината.

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

От автора:приветствам всички. Цветовете на фона и изображенията в уеб дизайна играят огромна роля, тъй като ви позволяват да проектирате по-привлекателно всеки елемент. Как да направите фон в html, ще разгледаме днес.

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

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

Съответно ще използваме каскадни стилови таблици (css). Има много повече опции за настройка на фона. Днес ще анализираме най-основните.

Как да задам фон с css?

Така че, на първо място, трябва да решите към кой елемент искате да зададете фон. Тоест трябва да намерим селектора, на който ще напишем правилото. Например, ако трябва да зададете фона за цялата страница като цяло, тогава можете да направите това чрез селектора на тялото, за всички блокове чрез селектора div. Ами и т.н. Фонът може и трябва да бъде прикачен към всякакви други селектори: стилови класове, идентификатори и т.н.

След като сте избрали селектора, трябва да напишете името на самия имот. За да зададете цвета на фона (а именно плътен цвят, а не градиент и не изображение), се използва свойството background-color. След него трябва да поставите двоеточие и да напишете самия цвят. Това може да стане по различни начини. Например, като използвате ключови думи, шестнадесетичен код, rgb, rgba, hsl формати. Всеки метод ще свърши работа.

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

тяло (цвят на фона: #D4E6B3; )

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

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

За снимката ще използвам малка икона на html език:

Нека създадем празен блок с ID:

Нека му дадем изрични размери и фон:

#bg( ширина: 400px; височина: 250px; background-image: url(html.png); )

От този код можете да видите, че съм използвал ново свойство, наречено background-image. Той е предназначен само за вмъкване на изображение като фон към html елемент. Да видим какво се случи:

За да посочите изображение, трябва да напишете URL адреса на ключовата дума след двоеточие и след това да посочите пътя до файла в скоби. В този случай пътят се посочва въз основа на факта, че изображението е в същата папка като html документа. Трябва също да посочите формата на изображението.

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

Но забелязахте ли една особеност? Браузърът взе и умножи картината в целия блок. Така че, само за да знаете, това е поведението по подразбиране на фоновите изображения - те се повтарят вертикално и хоризонтално, стига да могат да се поберат в блока. С това поведение можете лесно да управлявате. За да направите това, използвайте свойството background-repeat, което има 4 основни стойности:

Repeat - стойността по подразбиране, изображението се повтаря от двете страни;

Repeat-x - повтаря се само на ос x;

Repeat-y - повтаря се само по оста y;

Без повторение – изобщо не се повтаря;

Можете да напишете всяка стойност и да видите какво се случва. ще пиша така:

фоново повторение: повторение-x;

Сега повторете само хоризонтално. Ако пишете без повторение, тогава ще има само една снимка.

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

С повторение кодерите използваха, за да постигнат целта да създават фонови текстури и градиенти, използвайки едно малко изображение. Може да бъде 30 на 10 пиксела или дори по-малко. Или може би малко повече. Изображението беше такова, че когато се повтаряше от едната или дори от двете страни, не се виждаха преходи, така че в крайна сметка се получи един-единствен плътен фон. Между другото, този подход си струва да използвате сега, ако искате да използвате безпроблемна текстура на вашия сайт като фон. Градиентът днес вече може да бъде реализиран с помощта на css3 методи, определено ще говорим за това по-късно.

Фонова позиция

По подразбиране фоновото изображение, ако не е настроено да се повтаря, ще бъде в горния ляв ъгъл на своя блок. Но позицията може лесно да се промени със свойството background-position.

Можете да го попитате по различни начини. Една от опциите е просто да посочите страните, в които трябва да бъде изображението:

позиция на фона: вдясно отгоре;

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

фон-позиция: 50% 50%;

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

И накрая, можете да посочите позицията в пиксели. Всичко е същото, само че вместо % ще има px. В някои случаи може да се наложи и такова позициониране.

Съкратена нотация

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

фон: #333 url(bg.jpg) без повторение 50% 50%;

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

Контрол на размера на фоновото изображение

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

Какво може да се направи в такъв случай? Разбира се, най-простият и разумен вариант би бил просто да намалите изображението, но не винаги е възможно да направите това. Да кажем, че лежи на сървъра и в момента няма време и възможност за намаляване. Проблемът може да бъде решен с помощта на свойството background-size, което може да се нарече сравнително ново и което ви позволява да манипулирате размера на фоновото изображение и всъщност всеки фон.

И така, моето изображение сега заема цялото място в блока, но ще му дам размер на фона:

размер на фона: 80% 50%;

Отново първият параметър е хоризонталният размер, вторият е вертикалният размер. Виждаме, че всичко е приложено правилно - снимката е станала 80% от ширината на блока в ширина и половината във височина. Тук трябва да направите само едно уточнение - като зададете размера като процент, можете да повлияете на пропорциите на картината. Така че внимавайте, ако искате да не нарушите пропорциите.

Както може би се досещате, размерът на фона може да бъде определен и в пиксели. Има и две ключови думи със стойност, които също могат да се използват:

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

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

Предимството на тези стойности е, че те не променят пропорциите на картината, оставяйки ги същите.

Освен това трябва да разберете, че разтягането на картината може да доведе до влошаване на нейното качество. Мога да дам пример от живота и реалната практика на дизайнерите на оформление. Всеки знае и разбира, че когато проектирате за настолни компютри, трябва да адаптирате сайта към ширините на главния монитор: 1280, 1366, 1920. Ако вземете фоново изображение с размери, да речем, 1280 на 200, и не задавате размера на фона на го, след което се появяват екрани с ширина, по-голяма от празно пространство, картината няма да запълни ширината напълно.

В 99% от случаите това не отговаря на уеб разработчика, така че той задава фон-размер: покритие, така че изображението винаги да се простира до максималната ширина на прозореца. Това е добър трик за използване, но сега ще се сблъскате с проблема, че потребителите с ширина на екрана от 1920 пиксела може да видят неоптимално качество на изображението.

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

Като цяло, това е само 1 пример за това как да приложите знанията, които сте придобили в тази статия, към оформления в реалния живот.

полупрозрачен фон с css

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

Като пример ще задам фона на цялата страница на изображението, което използвахме по-рано в примерите. За блока с bg идентификатора, върху който провеждаме всички наши експерименти, ще зададем фона с помощта на формата за настройка на цвета rgba.

Както казах по-рано, има много формати в css за задаване на цветове. Един от тях е rgb, доста добре познат формат за тези, които работят в графични редактори. Пише се така: rgb(17, 255, 34);

Първата стойност в скоби е наситеността на червено, след това зелено, след това синьо. Стойността може да бъде числова от 0 до 255. Съответно форматът rgba не се различава, добавя се само още един параметър - алфа каналът. Стойността може да бъде от 0 до 1, където 0 е пълна прозрачност.

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

Създаване на нов фон за уебсайтове

За да изпълните задачата, можете да използвате един от 4 метода:

• 1. Фон с един цвят
• 2. Фон с текстура
• 3. Фон с градиент
• 4. Фон с голямо изображение

Създайте фон с един цвят

За да създадете или промените фона на сайта, който се състои от един цвят, трябва да отидете на файла style.css, в който да намерите стойността - body (отговаря за основното тяло на сайта). Сега трябва да напишете функцията background-color, ако не е била там, и да посочите цветния код. В случай, че трябва да създадете бял фон за сайта, ще трябва да напишете следния код:

цвят на фона: #83C5E9 ; (син фон, както в примера)

Пълен списък с цветове можете да намерите на сайта - (STM). За да промените цвета, просто променете стойността след двоеточие и се насладете на работата си.

Създаване на фон с текстура

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

цвят на фона: #537759;

фоново изображение: url(images/pattern.png);

В този код има познат параметър за поддържане на цвета (той е зелен) и елемент, който отговаря за свързването на зелената текстура.

Създаване на фон с градиент

Всяко изображение, което е свързано с помощта на css функции, може да се повтаря както хоризонтално, така и вертикално (по осите хи Й). Тази функция ни позволява да създадем всеки прост фон за сайта със собствените си ръце. За да направите това, трябва да създадете градиент с ширина 1 мегапиксела (вижте снимката по-долу), да го запишете като изображение и да го качите на хостинга. След това можете да напишете необходимия код, а именно:

цвят на фона: #83C5E9;

фоново изображение: url(images/gradient.jpg);

фоново повторение: повторение-x;

В този набор по приоритет има функция, отговаряща за цвета на фона, който използваме за презастраховане. След това параметър, който е отговорен за свързването на градиента, и накрая, функция, която е отговорна за повтаряне на градиента по оста X.

Използване на голямо изображение за фон на сайта

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

цвят на фона: #000000;

фоново изображение: url(изображения/заглавие на изображението.jpg);

позиция на фона: център отгоре;

фоново повторение: без повторение;

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

Промяна на фона на уебсайтове на ucoz

Тези методи за създаване на фон за сайт могат да се използват в различни системи за управление на съдържанието, но не и в сайтове - ucoz. За да промените фона на сайта ucoz, трябва да отидете на контролния панел на сайта, да отидете на "Управление на дизайна", а след това в "Редактиране на шаблони".

Сега трябва да отворите Style Sheet (CSS), да намерите реда тялои параметър заден план. След това трябва да копирате връзката, да я поставите в интернет браузъра и ще получите достъп до снимката, която е била фон.

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

Променете фона на сайта на HTML

Ако искате да направите фон на html сайт с помощта на изображение, просто въведете реда в кода:

И ако искате да направите фона на сайта с помощта на цвят, тогава линията трябва да изглежда така:

С това приключваме нашата история. Сега знаете как да направите фон за уебсайт. Успешни проекти!

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

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

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

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

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

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

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

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

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

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

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

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

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

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