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

#bg (позиция: фиксирана; отгоре: -50%; вляво: -50%; ширина: 200%; височина: 200%;) #bg img (позиция: абсолютна; отгоре: 0; вляво: 0; вдясно: 0; дъно: 0; поле: автоматично; мин. ширина: 50%; мин. височина: 50%;)

Работи в:

Safari / Chrome / Firefox (не е тестван във всички версии, но работи чудесно в най -новата версия).

IE 8+.

Opera (всяка версия) и IE отказват да работят с този метод (неправилно позициониране на изображението).

Използване на jQuery

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

#bg (позиция: фиксирана; отгоре: 0; отляво: 0;) .bgwidth (ширина: 100%;) .bgheight (височина: 100%;)

$ (функция () (var theWindow = $ (прозорец), $ bg = $ ("# bg"), aspectRatio = $ bg.width () / $ bg.height (); функция resizeBg () (ако ((theWindow .width () / theWindow.height ())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Работи в:

IE7 + (с мъничета, вероятно ще работи и в IE6)

Във всички останали браузъри.

Заключение

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

здравей Днес ще разгледаме как можете да разтегнете фона с css инструменти (без намесата на други инструменти, като javascript и други подобни на тях).

Опъвам, разтягам CSS фонсредства станаха възможни с появата на CSS3, по-специално със свойството background-size. Трябва да кажа, че това свойство работи много по-добре от подобни решения в Javascript (които са били използвани преди появата на фонов размер), тъй като реагира по-бързо и по-адекватно на преоразмеряването на браузъра, изглажда разтеглена картина по-бързо и както им харесва да кажем в началото на 2000 -те, x, - "Ще работи дори с деактивиран Javascript."

Решение: Как да разтегнете фона на CSS с помощта на инструменти

Свойството размер на фона може да има множество стойности.
1) може да бъде една от директивите: покриване или съдържане.

Размер на фона: съдържа; / * Мащабира изображението пропорционално, така че цялото изображение да побере вътре в блока. * / background-size: корица; / * Мащабира изображението пропорционално, така че неговата ширина или височина да е равна на ширината или височината на кутията. * /

2) може да бъде процент (100% или 94% от ширината на контейнера). В този случай можете да използвате както 1 процентна стойност, така и 2. Ако има 2 стойности, тогава височината и ширината на картината ще бъдат мащабирани едновременно, докато всяка от стойностите се коригира пропорционално на процента, посочен в параметрите ).

Размер на фона: 100%; / * Еквивалентно на директивата за покритие * / размер на фона: 100% 50%; / * Ширината ще бъде 100% от ширината на блока, но височината ще бъде само 50%, картината най -вероятно ще се деформира * /

3) директно числова стойност (в пиксели, сантиметри, em и т.н.). Също така може да има 2 (или 1) параметъра, както в предишния случай.
4) автоматична стойност. Показва, че картината няма да се разтяга, но ще се използва оригиналният размер. В този случай параметрите могат да бъдат и 2 или 1. Това означава, че можете да посочите следното:

Размер на фона: 60% автоматично; / * ширината на изображението ще бъде 60%, а височината ще бъде пропорционална на размерите на оригиналното изображение * /

Къде би работило CSS фоново разтегателно решение?

Съдейки по данните от сайта Can I Use, той ще работи във всички съвременни браузъри, включително IE версии на поне 9. Така че по принцип няма причина за притеснение. Вижте таблицата за съвместимост:

Задача

Разтегнете фоновото изображение до цялата ширина на прозореца на браузъра с помощта на CSS3.

Решение

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

Пример 1. Разтеглив фон

HTML5 CSS 2.1 IE Cr Op Sa Fx

Резултат този примерпоказано на фиг. 1.

Ориз. 1. Изглед на фона при намален размер на прозореца

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

Ориз. 2. Изглед на фона, когато прозорецът е увеличен

2 гласа

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

Ще говоря и за някои от нюансите, които ще направят фона по-равномерен и красив. Е, ще започнем ли?

Избор на картина

Бих искал да започна с избора на изображение. Така че на страницата да изглеждате по-гладки и красиви и да не се притеснявате с размерите и подравняването. Предлагам веднага да потърсите безшевни текстури. Какво е?

За съжаление не е възможно да се разтегне изображение в html на цял екран. Снимката се използва в пълен размер. Ако снимката е малка, тя ще проправи цялата площ, както е на екранната снимка по-долу. За да разтегнете изображението, ще трябва да създадете допълнителен css документ, без това няма да работи.

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

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

Ако и вие се интересувате от липсата на правни последици за използването им, тогава ви препоръчвам да потърсите в сайта Pixabay.com .

Html

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

Така че можете да работите в Notepad, предпочитам NotePad ++. Много по -удобно е да работите в него: кодът се добавя вместо вас, маркерите се маркират. Програмата е безплатна и тежи около 3 MB. Силно препоръчвам, особено ако сте начинаещ.

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

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

<html> <глава> <заглавие>Фоново изображение</ заглавие> </ глава> <фон на тялото = „https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png“> </ тяло> </ html>

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

Копирайте този конкретен URL.

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

Готово, страницата е изпълнена с различен цвят.

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

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

Както всеки писател има свое виждане как да пише, така и програмистите имат свой почерк. Можете да се научите да създавате уебсайтове през целия си живот, но трябва да започнете от някъде. От книги? Не това. Да, те съдържат по-надеждна информация, подходяща информация, но са толкова трудни за овладяване.

Не сте съгласни с мен? Мога да предложа алтернатива. Книгата на Елизабет и Ерик Фрийман " Научете HTML, XHTML и CSS ". Не е много скучен бестселър и беше пуснат не толкова отдавна, през 2016 г. Информацията все още не е остаряла.

CSS

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

CSS помага за решаването на този проблем. Трябва да създадете файл с разширение css и да въведете следния код:

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

За тези, които искат да знаят по -добре

С css можете да се разтягате фоново изображение, направете го така, че да не се повтаря, добавете gif-анимация и много други.

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

Искате ли да научите как да пишете уебсайтове правилно? Препоръчвам ви да научите езици за програмиране. Мога да препоръчам курса на Андрей Бернацки " HTML5 и CSS3 от Zero до Pro ". Много харесвам този автор. Не съм взел този конкретен курс, преди няколко години вече имаше нещо подобно, но по -малко модерно.

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

Между другото, заедно с този курс получавате 7 бонуса: основите на html и css от Андрей Бернацки, оформление за начинаещи, създаване на целева страница за вечерта и много други. Преди да започнете сериозно обучение, опитайте безплатния курс “ Практикувайте HTML5 и CSS3 ».

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

Добър ден, маниаци на изграждането на сайтове и любители на уеб темите. Днес искам да дам отговор на често задаван въпрос не само от начинаещи, но понякога и от разработчици: "Как да разтегля css картина на цял екран?" Всъщност такава техника е много проста за изпълнение, но това е друг въпрос.

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

Метод 1. Адаптивно фоново изображение с css инструменти

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

За да направите това, просто трябва да напишете следния ред:

заден план-размер: 100%Автоматичен

Първият параметър, т.е. 100%, отговаря за разтягане на картината хоризонтално, вторият параметър е вертикален. Сега нека преминем към пример.

Този метод се поддържа от браузъри, започвайки от версия 10, версия 3 на Safari, Firefox 3.6 и версия 9 на IE.

Метод 2. Гумен фон с помощта на css3

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

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

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

За да може примерът да работи насам, първо трябва да свържете js скрипта със следния ред:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

Планетариум на открито! Разгледайте далечни звезди, планети и лунни кратери ...

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

Метод 4. Php реализация на разтеглено до цял екран изображение

Няколко думи за самия език. Php се нарича скриптов език. Използва се за писане на сървърната страна на уеб приложения, т.е. свържете услугата към базата данни, обработвайте заявки и т.н. Самият php код е вграден в html и взаимодейства с него гъвкаво.

За да вмъкнете парче код, трябва да напишете текста в следните скоби:

Сега, в оригиналния пример, трябва само да вмъкнете няколко реда:

1 2 3 4 5