Как сделать фоновое изображение в css на весь экран

Как сделать в html фоновое изображение – Как сделать background-image на весь экран, при условии того, что будет видна вся картинка?

seodon.ru | Учебник HTML — Изображения для фонов

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Изображения в качестве фонов используются в HTML не менее часто, чем просто изменения цвета фона, которые мы с вами уже проходили. И это вполне логично, ведь с помощью изображений можно сделать неоднотонный и более красочный фон.

Обычно, в качестве образца для фона применяются небольшие по размеру и объему (в килобайтах) рисунки, а все потому, что фоновые изображения браузеры обрабатывают иначе, чем обычные рисунки. Они берут эту маленькую картинку и замащивают ей, как кирпичиками, весь участок HTML-страницы или всю ее целиком.

Как сделать фоновое изображение в HTML?

В прошлых версиях HTML у некоторых тегов существовал специальный атрибут background, который позволял делать фоновое изображение. Но в том-то и дело, что только у некоторых, причем далеко не у всех, например у блочного тега <DIV> его не было. Сегодня я вам покажу способ, который можно применить абсолютно к любым HTML-тегам и опять мы используем стили (CSS), а точнее атрибут style. Общий синтаксис такой:

Обязательно заключайте адрес картинки в одинарные кавычки, как показано. И если вы хотите сделать фоновый рисунок для всей страницы, то используйте style внутри тега <BODY>.

А скажите мне, это значение style вам ничего не напоминает? Да-да, вы уже сталкивались с подобным в уроке по изменению цвета текста и фона, только там мы меняли просто фоновый цвет HTML-элементов. А теперь давайте соединим наши знания и запишем все это вместе:

Обратите внимание, что точку с запятой посередине ставить не надо, так как оба значения относятся к фону. Вы спросите: «А для чего это делать, ведь браузер не сможет одновременно показывать фоновый цвет и фоновое изображение»? И будете совершенно правы! При такой записи браузер в первую очередь показывает фон-изображение, а не цвет. А теперь представьте, что у вас фоновое изображение — это рисунок в темных тонах, а цвет текста на странице вы сделали белым. И все отлично смотрится&#8230; Пока пользователь не отключит в браузере показ изображений. Тогда у него фон станет скорее всего белым, как и ваш цвет текста. Как говорится, без комментариев&#8230;

Поэтому всегда, слышите, ВСЕГДА указывайте фон-цвет и фон-изображение вместе, как показано в последнем варианте.

Пример создания фоновых изображений в HTML

Созвездия в заоблачной дали
Раздумьям тщетным многих обрекли.
Одумайся, побереги рассудок &#8212;
Мудрейшие и те в тупик зашли.
Омар Хайам.

В данном примере для фона я использовал вот это изображение: Если же будет отключен показ изображений, то фон станет просто черным.

  1. Создайте заголовок статьи и шесть параграфов. Подчеркните текст заголовка и выделите его цветом #9999CC.
  2. Сделайте в последнем параграфе ссылку на любой сайт и установите на странице цвет #9999CC для ссылок при наведении курсора мыши.
  3. Установите на всей странице изображение-фон.
  4. Установите для всех параграфов другую картинку в качестве фона. Но сделайте так, чтобы у первых трех параграфов цвет внешних полей (отступов) совпадал с фоном страницы, а у остальных — с фоном самих параграфов.
  5. Вставьте на страницу изображение и выровняйте его по левому краю, но так, чтобы его обтекали только последние три параграфа.
  6. Установите у изображения внешние поля по 10px снизу и справа, а также 5px слева.

Посмотреть результат → Посмотреть ответ

Как сделать фон картинкой

Вы здесь:&#13; Главная &#8212; CSS &#8212; CSS Основы &#8212; Как сделать фон картинкой

&#13; &#13; Как сделать фон картинкой&#13;

Очень часто страницы сайта делают с фоном в виде картинки. И я регулярно получаю вопросы о том, как это сделать. Поскольку ответить одним словом здесь не получится (новички не поймут, а опытные и так это знают), я и решил рассказать в этой статье, как сделать фон картинкой.

Существует 3 основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.

Начнём с фона в виде градиента по горизонтали. Первым делом, Вам необходимо вырезать изображение шириной в 1 пиксель и высотой с самого начала до того места, где уже нет изменения цвета. В итоге, получится, длинная вертикальная полоска толщиной в 1 пиксель. Пусть её высота будет 800 пикселей. Чтобы сделать такой градиентный фон, необходимо в CSS написать следующее:

&#13; body <
&#13; background: url("images/bg.jpg") repeat-x #dedede;
&#13; > &#13;

Таким образом, эта полоска размножится по всей ширине экрана и получится градиентный фон. Возможно, Вы сейчас спросите: &#171;А что будет, если высота будет больше 800 пикселей?&#171;. Вот для этого мы и задали &#171;#dedede&#187; &#8212; тот цвет, где уже нет указанного фонового изображения. Безусловно, у Вас будет другое значение, которое соответствует самому последнему цвету в градиенте. Таким образом, получится, что вначале идёт градиент, а уже потом однотонный цвет, и никаких рывков не происходит.

Абсолютно аналогичный принцип и с градиентом по вертикали, только нужно уже вырезать картинку высотой в 1 пиксель, а также необходимо центрировать сам фон по центру:

Иногда, центрирование не требуется.

И, наконец, как сделать фон в виде обычной картинки. Здесь надо понимать один очень важный момент. Картинка не меняет свои размеры в CSS. Поэтому не получится сделать резиновую вёрстку там, где находится картинка в фоне, другими словами, картинка не будет растягиваться. А задаётся она аналогично:

body <
background: url("images/bg.jpg") no-repeat #dedede;
>

Цвет вне изображения надо задавать таким, чтобы был плавный переход от границ картинки к этому цвету.

Я показал Вам, как сделать фон картинкой. Безусловно, есть различные особенные случаи, где нужно уже думать самостоятельно, а самые основные и популярные варианты, Вы теперь уже знаете.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

  • &#13; Как сделать фон картинкой&#13; Создано 16.12.2011 13:32:22 &#13;
  • &#13; &#13; Михаил Русаков &#13;

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Она выглядит вот так: Как создать свой сайт

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

Многие начинающие верстальщики, только вникающие в суть создания сайтов, часто задаются вопросом, как в html сделать фон картинкой. И если некоторые и могут разобраться с этой задачей, то все равно возникают проблемы во время растягивания изображения на всю ширину монитора. При этом хотелось бы, чтобы сайт одинаково отображался на всех браузерах, поэтому должно выполняться требование кроссбраузерности. Можно установить фон двумя способами: с помощью HTML тегов и CSS стиля. Каждый сам для себя выбирает наиболее оптимальный вариант. Конечно, CSS стиль гораздо удобнее, ведь его код хранится в отдельном файле и не занимает лишние колонки в основных тегах сайта, но прежде рассмотрим простой метод установки изображения на фон сайта.

как сделать картинку фоном в html на весь экран

Основные теги HTML для создания фона

Итак, переходим к вопросу, как сделать картинку фоном в html на весь экран. Для того чтобы сайт красиво выглядел, необходимо понимать одну достаточно важную деталь: достаточно просто сделать градиентный фон или закрасить его однотонным цветом, но если вам необходимо вставить на задний план картинку, она не будет растягиваться на всю ширину монитора. Изображение изначально нужно подобрать или самостоятельно сделать дизайн с таким расширением, в котором у вас будет отображаться страница сайта. Только после того как фоновое изображение готово, переносим его в папку с названием «Images». В ней мы будем хранить все используемые картинки, анимации и другие графические файлы. Эта папка должна находиться в корневом каталоге со всеми вашими файлами html. Теперь можно переходить и к коду. Существует несколько вариантов записи кода, с помощью которого фон будет меняться на картинку.

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

Как в HTML сделать фон картинкой, решать вам, но хотелось бы сказать пару слов о том, как было бы наиболее оптимально. Первый метод с помощью написания через атрибут тега уже давно устарел. Второй вариант используется в очень редких случаях, только потому что получается много одинакового кода. А третий вариант самый распространенный и эффективный. Вот HTML примеры тегов:

  1. Первый способ записи через атрибут тега (body) в файле index.htm. Он записывается в таком виде: (body background= &#171;Название_папки/Название_картинки.расширение&#187;)(/body). То есть если у нас картинка с названием «Picture» и расширением JPG, а папку мы назвали как «Images», тогда запись HTML-кода будет выглядеть так: (body background=&#187;Images/Picture.jpg&#187;)… (/body).
  2. Второй метод записи затрагивает CSS стиль, но записывается в том же файле с названием index.htm. (body).
  3. И третий способ записи производится в двух файлах. В документе с названием index.htm в теге (head) записывается такая строчка: (head)(link rel=&#187;stylesheet&#187; type=&#187;text/css&#187; href=&#187;Путь_к CSS_файлу&#187;)(/head). А в файле стилей с названием style.css уже записываем: body .

Как в HTML сделать фон картинкой, мы разобрали. Теперь необходимо понять, как растянуть картинку по ширине всего экрана.

Способы растягивания фоновой картинки на ширину окна

Представим наш экран в процентном виде. Получается, что вся ширина и длина экрана будет составлять 100% х 100%. Нам необходимо растянуть картинку на эту ширину. Добавим к записи изображения в файл style.css строку, которая и будет растягивать изображение на всю ширину и длину монитора. Как это записывается в CSS стиле? Все просто!

background-size: 100%; /* такая запись подойдет для большинства современных браузеров */

Вот мы и разобрали, как сделать картинку фоном в html на весь экран. Есть еще способ записи в файле index.htm. Хоть этот метод и устаревший, но для новичков необходимо его знать и понимать. В теге (head)(style) div < background-size: cover; >(/style) (/head) эта запись означает, что мы выделяем специальный блок для фона, который будет позиционироваться по всей ширине окна. Мы рассмотрели 2 способа, как сделать фон сайта картинкой html, чтобы изображение растягивалось на всю ширину экрана в любом из современных браузеров.

Как сделать фиксированный фон

Если вы решили использовать картинку в качестве фона будущего веб-ресурса, тогда вам просто необходимо узнать, как его сделать неподвижным, чтобы он не растягивался в длину и не портил эстетичный вид. Достаточно просто с помощью HTML кода прописать это небольшое дополнение. Вам необходимо в файле style.css дописать одну фразу после background: url(Images/Picture.jpg&#8217;) fixed; или вместо нее добавить после точки с запятой отдельную строчку &#8212; position: fixed. Таким образом, ваш фоновый рисунок станет неподвижным. Во время прокрутки контента на сайте, вы увидите, что текстовые строки двигаются, а фон остается на месте. Вот вы и научились, как в html сделать фон картинкой, несколькими способами.

html примеры

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

Многие неопытные веб-разработчики, сталкиваясь с таблицами и блоками, часто не понимают, как в html сделать картинку фоном таблицы. Как и все команды HTML и CSS стиля, этот язык веб программирования достаточно простой. И решением такой задачи будет написание пары строк кода. Вы уже должны знать, что написание табличных строк и столбцов обозначается соответственно как теги (tr) и (td). Чтобы фон таблицы сделать в виде изображения, необходимо дописать к тегу (table), (tr) или (td) простую фразу с указанием ссылки на картинку: background = URL картинки. Для наглядности приведем пару примеров.

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

Нарисуем таблицу 2х3 и сделаем ее фоном картинку, сохраненную в папке “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблица будет закрашена в фон картинки.

html сделать картинку фоном таблицы

Теперь нарисуем эту же табличку размерами 2х3, но вставим картинку в столбики под номером 1, 4, 5 и 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5(/td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.

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

Кроссбраузерность сайта

Существует еще такое понятие, как кроссбраузерность веб-ресурса. Это означает, что страницы сайта будут одинаково правильно отображаться в разных типах и версиях браузеров. При этом нужно HTML код и CSS стиль подгонять под необходимые браузеры. Кроме того, в современное время развития смартфонов многие веб-разработчики стараются создать сайты, адаптированные и под мобильные версии и под компьютерный вид.

УЧЕБНИК HTML для новичков &#8212; Фон для web-сайта

Фон для странички

Bgcolor и Background

Ну, что же… пришла пора определиться, на чьем же фоне мы будем умопомрачающе выглядеть! И где же тот чудесный тег, который за это дело отвечает? Какие у него есть, выражаясь умным словом атрибуты? И, главное, каким образом разместить всю нашу красоту?

Короче, вопросов &#8212; множество! А ответ всего один. Ну нету такого тега вообще! Еще не придумали!

Но не огорчайтесь! Нет тега и не надо! Зато есть два чудесных атрибута известного нам дескриптора BODY. Так что встречайте старого знакомого!

Фон, или как принято называть задний фон в переводе на английский означает background. Поэтому нет ничего проще запомнить два атрибутика, созданных в его честь. Один &#8212; background, а другой &#8212; bgcolor.

Так чем же они отличаются? Какими возможностями обладают? И, главное, чем будут нам полезны?

Начнем, с самого простого &#8212; bgcolor. Этот атрибут отвечает за цвет фона. Вы можете подставить любое значение, в буквенном или в числовом значении цвета и ваш фон окрасится как по волшебству.

Что ж, ради примера можем открыть наш шаблон, либо любой, созданный нами ранее файл и попытаться залить страничку любимым цветом. Я же открою свою страничку index.html в NotePad (Блокнот) и внесу следующие изменения:

Листинг 11. Файл index.html

<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY bgcolor=blue>
<IMG src=&#187;foto/myfoto01.jpg»>
Ура! Привет мир! Привет люди! Встречайте!
</BODY>
</HTML>

Сохраним наше творение под тем же именем и посмотрим, что получилось:

Я на синем фоне

Если по каким-то причинам вам не нравится голубой фон, можете взять другой цвет, например розовый, можете даже писать цвет не буквами, а числами. Только не забудьте впереди числа поставить решетку. И все у вас получится! Можете поиграть разными цветами, пока не надоест. А как надоест, будем читать дальше про другой атрибут &#8212; background.

Этот атрибут указывает не на цвет изображения, а на картинку, которую стоит поместить в качестве фона, или как еще говорят, фоновых обоев. Обои можно подобрать любые, какие только подскажет вам фантазия. Моя фантазия подсказала мне взять картинку, на которой я в новом пиджаке. А потому, не мудрствуя лукаво, открываю свой файл index.html и делаю следующие изменения:

Листинг 12. Файл index.html

<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY background=&#187;foto/myfoto01.jpg»>
<IMG src=&#187;foto/myfoto01.jpg»>
Ура! Привет мир! Привет люди! Встречайте!
</BODY>
</HTML>

Сохраняем этот файл и смотрим, что у нас получилось

оно &#8212; фоновое изображение!

Что ж, с одной стороны, приятно видеть столько умных людей в одном месте, но с другой стороны… ну куда столько. Однако, отбросив шутки в сторону, можно понять, что же сделал атрибут background &#8212; он просто взял и размножил исходное изображение, заполнив им весь экран.

Но нельзя ли загрузить одну картину, но на весь экран? В принципе, можно! И мы сейчас этим займемся. Единственно, что необходимо учесть, так это размеры изображения. Так, при разрешении экрана 800 х 600, свободного места для изображения, если вычесть все верхние и нижние панели, остается 781 х 476 пикселей. Вот и подберем такое изображение.

Поэтому я опять открываю программу Adobe Photoshop, выбираю фотографию с изображением моря, подгоняю его размеры под искомые 781 х 476, оптимизирую для web и сохраняю под именем fonsea.jpg в своей папке foto. Ну и затем, иду проторенным путем: открываю файл index.html и ввожу следующие изменения:

Листинг 13. Файл index.html

<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY background=&#187;foto/fonsea.jpg»>
<IMG src=&#187;foto/myfoto01.jpg»>
Ура! Привет мир! Привет люди! Встречайте!
</BODY>
</HTML>

Опять сохраняем и смотрим результат

И вот оно &#8212; море! Играет, шумит на просторе…

Красиво, правда? Вот если бы это разрешение экрана было установлено у всех пользователей! Но, увы! Стоит мне увеличить разрешение до 1152 х 864 и получается уже следующая картина:

Печально я гляжу на это отраженье&#8230;

Согласитесь, это совсем не то, что хотелось. Конечно, красота требует жертв, и вы можете спокойно откинуть тех пользователей, чье мнение о разрешении экрана не совпадает с вашим, либо предложить им выбрать настройки, которые вы им укажете. Решать, в конечном счете, только вам.

Хотя бывает красота и без жертв. Которая великолепно будет смотреться на всех мониторах без исключения. И я попытаюсь в этом помочь. Как вы заметили, фон заполняется копиями рисунка. И этим свойством не грех и воспользоваться. Мы ведь можем сделать одну маленькую картинку, которая займет памяти намного меньше большой, и заполним ею весь экран. Тут главная хитрость постараться сделать эту картинку &#171;без швов&#187;. То есть, чтобы не было видно стыков между соседними изображениями. И для этого нам опять понадобится незаменимая программа Adobe Photoshop.

Конечно, можно особо и не утруждаться, и взять готовые фоновые картинки из Интернета, где они просто кишмя кишат. Для этого можно набрать в любой поисковой системе (www.yandex.ru, www.apport.ru, www.ramber.ru и многих других) заветные слова (фон, фоновые обои, background) и к вашим услугам предстанут десятки и десятки сайтов, готовые отдать вам эти фоны за ради бога, и что особо радует, совершенно бесплатно.

Только не удивляйтесь потом, что точно такой фон вы найдете и на других сайтах. Так что если вы хотите сделать что-то, пусть и сопливое, но СВОЕ, предлагаю закатать рукава, и взяться за дело. Тем более это очень увлекательное занятие, от которого просто трудно оторваться.

Как img во весь div?

04e315f852444a9a88329f3a2de3457e.jpg

есть div размером 1:1, 1:2, 2:1, 2:2, короче квадрат, большой квадрат, вертикальный блок и горизонтальный блок. Есть картинка непредсказуемого размера, т.е. может быть вертикальной, может горизонтальной. Картинка в этот div вставляется через img и надо сделать так, чтобы картинка уменьшалась/увеличивалась пропорционально до размеров div и заполняла его весь и центровалась. без полей по бокам или сверху снизу.
сделать это если картинку пихать из css бекграундом и background-size:cover; — получилось, но надо сделать через img

зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени. хочется сделать красиво и элегантно.

Aliexpress Kleider Fuer Besondere Anlaesse 666

Download Images Library Photos and Pictures. Свойство background-position: позиция фона &#8212; учебник CSS Как для заголовков списков товаров установить фоновое изображение вместо цвета? html: CSS Half Moon Фоновое изображение Маска html — Как разместить фоновое изображение для HTML / CSS? — Question-It.com

. html: CSS Half Moon Фоновое изображение Маска Мануал системы uCoz установить фоновое изображение CSS в phpstorm — &#171;не удается разрешить файл&#187; &#8211; 4 Ответа

Создание плоских "хлебных крошек" с использованием CSS

Создание плоских "хлебных крошек" с использованием CSS

Создание плоских "хлебных крошек" с использованием CSS

Как с помощью CSS сделать фон на всю страницу?

Как с помощью CSS сделать фон на всю страницу?

CSS свойство background. Фон для сайта // «Фрилансер по жизни»

CSS свойство background. Фон для сайта // &#171;Фрилансер по жизни&#187;

Свойство background-position: позиция фона — учебник CSS

Свойство background-position: позиция фона &#8212; учебник CSS

html - почему мое фоновое изображение css не отображается? - Question-It.com

html — почему мое фоновое изображение css не отображается? — Question-It.com

Css-Фон Для Всей Половины '.Row' Внутри '.Col-Md-6'

Css-Фон Для Всей Половины &#039;.Row&#039; Внутри &#039;.Col-Md-6&#039;

CSS-фоновое изображение не во весь экран (uikit) - CodeRoad

CSS-фоновое изображение не во весь экран (uikit) — CodeRoad

Наложение фонов CSS: реализация градиентов, узоров и других интересных эффектов

Наложение фонов CSS: реализация градиентов, узоров и других интересных эффектов

CSS фон прозрачный — Цвет фона — CSS картинка фон

HTML фон — картинка, цвет Фона HTML страницы, исходный код, background

Как наложить сетку на фоновое изображение? — Javascript-форум

Добавляем прозрачное фоновое изображение на сайте | Soft Settings

Add Background-Size to Customizer — управляем размером фонового изображения из админ-панели в WordPress

Add Background-Size to Customizer &#8212; управляем размером фонового изображения из админ-панели в WordPress

Background html — Seoblog

Background html &#8212; Seoblog

CSS Визуальное форматирование; управление цветами и внешним видом

CSS Визуальное форматирование; управление цветами и внешним видом

Использование масок CSS для создания зубчатых краев | DevsDay.ru

Использование масок CSS для создания зубчатых краев | DevsDay.ru

Как сделать, чтобы фон не повторялся? | WebReference

Как сделать, чтобы фон не повторялся? | WebReference

background » Скрипты для сайтов

background &#187; Скрипты для сайтов

Адаптивное фоновое изображение с помощью CSS

CSS свойство background-image как антипаттерн | by Stas Bagretsov | Medium

CSS свойство background-image как антипаттерн | by Stas Bagretsov | Medium

Мануал системы uCoz

Фоновая картинка | WebReference

Фоновая картинка | WebReference

Улучшенные эффекты с режимом смешивания фоновых слоев в CSS / Блог компании Поиск VPS / Хабр

Улучшенные эффекты с режимом смешивания фоновых слоев в CSS / Блог компании Поиск VPS / Хабр

Как быстро создать Landing Page с помощью шаблонов

Как быстро создать Landing Page с помощью шаблонов

Свойство CSS background-image в веб-дизайне

Свойство CSS background-image в веб-дизайне

Градиент на фоновое изображение в Css - Stack Overflow на русском

Градиент на фоновое изображение в Css — Stack Overflow на русском

Lection_3_1 - презентация онлайн

Lection_3_1 — презентация онлайн

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *