/ / Оформление на уебсайта: как да направите фоново изображение в html

Оформление на уебсайта: как да направите фоново изображение в html

Много начинаещи, които само наблюдаватв същността на създаването на сайтове, често се чудя как в HTML, за да направите фон картина. И ако някои хора могат да разберат този проблем, все още има проблеми при разтягане на изображението до пълната ширина на монитора. В този случай бих искал сайтът да се показва по един и същ начин във всички браузъри, така че трябва да бъде изпълнено изискването за съвместимост между различни браузъри. Можете да зададете фон по два начина: като използвате HTML тагове и CSS стил. Всеки си избира най-оптималната опция. Разбира се, стилът на CSS е много по-удобен, защото неговият код се съхранява в отделен файл и не приема ненужни колони в основните етикети на сайта, но преди да разгледаме прост метод за инсталиране на изображение на фона на сайта.

как да направите снимка на фона в html на цял екран

Основни HTML тагове за създаване на фон

Така че, нека да преминем към въпроса как да направите снимкафон в html на целия екран. За да изглежда красива сайт, трябва да се разбират един доста важен детайл: достатъчно е само да се направи градиент фон или да го рисувам плътен цвят, но ако трябва да поставите фоновото изображение, то няма да се простират по цялата ширина на монитора. Изображението беше първоначално е необходимо да се вземе или да направите свой собствен дизайн с това разширение, в която ще се покаже страница на сайта. Само когато фоновото изображение е готов, плъзнете го в папка с името «Картинки». В него ние ще съхранява всички използвани изображения, анимации и други графични файлове. Тази папка трябва да се намира в главната директория с всичките си HTML файлове. Сега можете да отидете на кода. Има няколко възможности за писане код, чрез който на заден план ще се промени картината.

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

Както и в HTML изобразяване на фонова картина, зависи от вас, ноБих искал да кажа няколко думи за това как би било най-оптимално. Първият метод чрез писане чрез атрибута на маркер отдавна е остарял. Вторият вариант се използва в много редки случаи, само защото получавате много от същия код. И третият вариант е най-разпространеният и ефективен. Ето примерни маркери на HTML:

  1. Първият начин да напишете чрез атрибута на таг (тяло) вфайл index.htm. Той се съхранява в тази форма: (фон тяло = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ тяло). Това означава, че ако имаме една снимка със заглавие «снимка» и разширение JPG, и папката нарекохме «Картинки», а след влизането на HTML-код ще изглежда така: (тяло фон = "Images / Picture.jpg") ... (/ тяло) ,
  2. Вторият начин на писане оказва влияние върху стила на CSS, но е написан в същия файл, наречен index.htm. (стил на тялото = "background: url (" ../ Images / Picture.jpg ")").
  3. И третият начин на запис се извършва в два файла. Документът с заглавието маркер index.htm (главата) се записва е линия: (главата) (линк отн = тип "стилове" = "текст / CSS" HREF = "Put_k CSS_faylu") (/ глава). Файл с името style.css стил вече пише: тялото {фон: URL (Снимки / Picture.jpg ")}.

как да направите фон на сайта html

Както в HTML, за да направите фон, ние разглобяваме. Сега трябва да разберете как да разтегнете картината през ширината на целия екран.

Начини за опъване на фоновото изображение до ширината на прозореца

Нека си представим нашия екран като процент. Оказва се, че цялата ширина и дължина на екрана ще бъде 100% x 100%. Трябва да разтеглим картината до тази ширина. Добавете към вписването на изображението в файла style.css низ, който ще разтегли изображението до пълната ширина и дължина на монитора. Как се пише в стила на CSS? Това е просто!

тяло

{

фон: URL адрес (Снимки / Picture.jpg)

размер на фона: 100%; / * този запис е подходящ за повечето съвременни браузъри * /

}

Затова разбрахме как да направим картина на фонhtml на цял екран. Налице е също така метод за запис във файла index.htm. Въпреки че този метод е остарял, за начинаещите е необходимо да го познават и разбират. DIV маркера (главата) (стил) {фон размер: покривка; } (/ style) (/ head), това означава, че ние избираме специален блок за фон, който ще се позиционира по цялата ширина на прозореца. Разгледахме два начина как да направите фоново HTML изображение на сайта, така че изображението да е опъната до пълната ширина на екрана в някой от модерните браузъри.

Как да направите фиксиран фон

Ако решите да използвате картината катоПредистория на бъдещата уеб ресурс, а след това просто трябва да се знае как да го направи фиксирани, така че да не се разтяга по дължина и не се развалят естетичния вид. Достатъчно е просто да използвате HTML код, за да напишете тази малка добавка. Трябва да се подаде style.css да добавите фраза след фон: URL адрес (Снимки / Picture.jpg "), закрепени, или вместо това се добавят след точка и запетая отделен ред - позиция :. Фиксирана по този начин, тапет ще бъде фиксирана във времето. превъртате съдържанието на сайта, ще видите, че текстовите линии се движат, но на фона остава на мястото си. Така че вие ​​научихте как да направите HTML фоново изображение, по няколко начина.

html примери

Работа с таблица в HTML

Много неопитни уеб програмисти, изправени предтаблици и блокове, често не разбират как в html да направят картина на фона на масата. Както всички команди за HTML и CSS стил, този език за програмиране в мрежата е доста прост. И решението на този проблем ще бъде написването на няколко реда код. Вече трябва да знаете, че редове и колони за писане на таблици се обозначават съответно като маркери (tr) и (td). За да направите фона на масата под формата на изображение, то е необходимо да се добавят към маркера (маса), (TR) или (ТД) проста фраза във връзка с референтния картинката: фон = URL снимки. За по-голяма яснота даваме няколко примера.

Таблици с картинка вместо фон: HTML примери

Начертайте таблицата 2x3 и я направете като фоново изображение,(td) 2 (/ td) (td) 3) (/ td) (/ tr), която се съхранява в папката Изображения: (table background = "Images / Picture.jpg" ) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (td) (/ tr) (/ таблица). Така че нашата маса ще бъде нарисувана на фона на снимката.

html, за да направите фон на картината на таблицата

Сега теглим една и съща маса с размери 2х3, но(td) 2 (/ td) (td) 3 (td) (td) / td) (/ tr) (tr) (td background = "Изображения / Picture.jpg") 4 (/ td) (td background = "Изображения / Picture.jpg" /Picture.jpg")6(/td) (/ tr) (/ таблица). След като гледаме, виждаме, че фонът се появява само в клетките, в които сме регистрирали, но не и в цялата таблица.

как да направите фон в html

Сайт за кръстосан браузър

Все още има такова нещо катоCross-браузър уеб съвместимост ресурс. Това означава, че вашият сайт е еднакво добре показва в различни видове и версии на браузъри. В този случай, трябва HTML и CSS стилове, за да персонализирате необходимите браузъри. Освен това, в модерната ера на смартфони, много уеб разработчици се опитват да създадат сайтове и адаптирани за мобилни устройства версия и компютър поглед.

Прочетете повече: