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

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

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

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

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

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

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

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

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

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

тяло

{

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

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

}

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

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

Ако решите да използвате картината като фон на бъдещия уеб ресурс, просто трябва да се научите как да го направите, така че да не се простира по дължина и да не разваля естетическия външен вид. Обикновено с помощта на HTML код предпишете това малко допълнение. В файла style.css трябва да добавите една фраза след фона: url (Images / Picture.jpg) фиксирана или добавете отделен ред след нея, точка и запетая - позиция: фиксирана. По този начин фоновата ви снимка ще стане неподвижна. Докато превъртате съдържанието в сайта, ще видите, че текстовите линии се движат и фонът остава на мястото си. Така че сте се научили как да направите фоново изображение в html, по няколко начина.

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

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

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

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

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

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

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