Как в css картинку сделать фоном: background-image | htmlbook.ru

---

25.12.1973 Разное

---

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

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

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

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

body {
  background: url("images/bg.jpg") repeat-x #dedede;
}

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

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

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

body {
  background: url("images/bg.jpg") repeat-y center #dedede;
}

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

И, наконец, как сделать фон в виде обычной картинки. Здесь надо понимать один очень важный момент. Картинка не меняет свои размеры в

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

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

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

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

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

• Создано 16.12.2011 13:32:22
• Михаил Русаков

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body

{

background: url(Images/Picture.jpg’)

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

}

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

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

Если вы решили использовать картинку в качестве фона будущего веб-ресурса, тогда вам просто необходимо узнать, как его сделать неподвижным, чтобы он не растягивался в длину и не портил эстетичный вид. Достаточно просто с помощью HTML кода прописать это небольшое дополнение. Вам необходимо в файле style.css дописать одну фразу после background: url(Images/Picture.jpg’) fixed; или вместо нее добавить после точки с запятой отдельную строчку — position: fixed. Таким образом, ваш фоновый рисунок станет неподвижным. Во время прокрутки контента на сайте, вы увидите, что текстовые строки двигаются, а фон остается на месте. Вот вы и научились, как в 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). Так наша таблица будет закрашена в фон картинки.

Теперь нарисуем эту же табличку размерами 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 код и CSS стиль подгонять под необходимые браузеры. Кроме того, в современное время развития смартфонов многие веб-разработчики стараются создать сайты, адаптированные и под мобильные версии и под компьютерный вид.

Как установить фоновое изображение в CSS

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

Этот проект научит вас работать как с HTML, так и с CSS.

Что такое CSS?

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

Создание базового веб-сайта с помощью HTML

Поскольку CSS — это всего лишь язык стилей, чтобы его использовать, нам сначала нужно что-то для стиля. Нам будет достаточно очень простого веб-сайта, чтобы начать играть с CSS. На нашей странице будет отображаться «Hello World».

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

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

Всякий раз, когда вы видите слово, окруженное <> это тэг. Существует два типа тегов: тег, который отмечает начало раздела с помощью <>, и тег, который отмечает конец раздела с помощью . Текст внутри раздела также предназначен для облегчения понимания этого различия.

В нашем примере у нас есть четыре тега. Тег html указывает, какие элементы являются частью веб-сайта. Тег head содержит информацию заголовка, которая не отображается на странице, но необходима для ее создания. Все отображаемые элементы находятся между тело теги. У нас есть только один отображаемый элемент, тег p

. Он сообщает веб-браузеру, что текст является абзацем.

Связано: 10 простых примеров кода CSS, которые вы можете изучить за 10 минут

Добавление CSS в HTML

Теперь, когда у нас есть простая страница, мы можем настроить стиль с помощью CSS. Наша страница сейчас довольно проста, и мы мало что можем сделать, но давайте начнем с выделения нашего абзаца, чтобы мы могли отличить его от фона, добавив границу.

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

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

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

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

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

Теперь наш HTML легче читать. Вы заметите, что нам действительно пришлось изменить некоторые вещи. Тег стиля сообщает информацию о стиле веб-браузера, а также то, что нужно стилизовать. В нашем примере мы использовали два разных способа указать, что нужно стилизовать. p в теге стиля указывает веб-браузеру применить этот стиль ко всем тегам абзаца. Раздел #ourParagraph сообщает, что только элементы стиля с идентификатором наш пункт . Обратите внимание, что информация

id была добавлена ​​к тегу p в нашем теле.

Импорт файла CSS на ваш веб-сайт

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

Вместо этого мы сохраним информацию CSS в отдельном файле и импортируем этот файл для оформления страницы. Скопируйте и вставьте информацию между тегами стиля в новый файл CSS ourCSSfile. css .

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

Затем импортируйте файл в файл HTML.

 Указанный язык: HTML не существует. 
  Генерация кода не удалась!! 
' 

Добавление фонового изображения с помощью CSS

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

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

Чтобы изменить стиль тела в CSS, сначала используйте тело ключевое слово. Затем добавьте фигурные скобки, как мы делали до {}. Вся информация о стиле для тела должна быть заключена в фигурные скобки. Атрибут стиля, который мы хотим изменить, — background-image .

Атрибутов стиля много. Не надейтесь запомнить их все. Добавьте в закладки шпаргалку свойств CSS с атрибутами, которые вы хотите запомнить.

Связано: 8 классных HTML-эффектов, которые каждый может добавить на свой веб-сайт

После атрибута используйте двоеточие, чтобы указать, как вы будете изменять атрибут. Чтобы импортировать изображение, используйте URL() . это указывает на то, что вы используете ссылку для указания на изображение. Поместите местоположение файла в скобки между кавычками. Наконец, завершите строку точкой с запятой. Хотя пустое пространство не имеет значения в CSS, используйте отступы, чтобы облегчить чтение CSS.

Наш пример выглядит так:

Если ваше изображение отображается неправильно из-за размера изображения, вы можете изменить изображение напрямую. Однако в CSS есть атрибуты стиля фона, которые можно использовать для изменения фона. Изображения, которые меньше фона, будут автоматически повторяться в качестве фона.

Чтобы отключить это, добавьте background-repeat: без повтора; к вашей стихии.

Также есть два способа сделать так, чтобы изображение покрывало весь фон. Во-первых, вы можете установить размер фона равным размеру экрана с помощью background-size: 100% 100%; , но это растянет изображение и может слишком сильно его исказить. Если вы не хотите, чтобы пропорции изображения менялись, вы также можете установить background-size равным cover . Обложка заставит фоновое изображение закрывать фон, но не искажать изображение.

Изменение цвета фона

Давайте изменим последнюю вещь. Теперь, когда у нас есть фон, наш абзац трудно читать. Сделаем его фон белым. Процесс аналогичен. Элемент, который мы хотим изменить, это #ourParagraph. # указывает, что «ourParagraph» является именем идентификатора. Затем мы хотим установить для атрибута background-color белый цвет.

 Указанный язык: HTML не существует.  
 Генерация кода не удалась!! 
' 

Гораздо лучше.

Теперь, когда вы знаете, как изменить стиль различных HTML-элементов, предела нет! Основной метод изменения атрибутов стиля тот же. Определите элемент, который вы хотите изменить, и опишите, как изменить атрибут. Лучший способ узнать больше — поиграть с различными атрибутами. Испытайте себя, чтобы изменить цвет вашего текста дальше.

Альтернативный текст для фоновых изображений, доступность альтернативного текста

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

Если ваше изображение содержит важную информацию для конечного пользователя, тогда он должен быть предоставлен в HTML тег с правильным или текст. Спецификация CSS говорит следующее:

Из соображений доступности авторы не должны использовать фон изображения как единственный способ передачи важной информации. См. Интернет Руководство по доступности контента F3 [WCAG20] . Изображения недоступны в неграфических презентациях, и фоновые изображения могут быть отключены в высококонтрастные режимы отображения. Источник .

Не удается избежать использования изображений CSS или требуется альтернативный текст для «неважные» фотографии окружения и т. д.?

Спецификация CSS делает это «СЛЕДУЕТ», а не «ОБЯЗАТЕЛЬНО», потому что бывают случаи, когда визуальный дизайн или существующий код затрудняет преобразование его в HTML-изображение без переделки интерфейса. В других случаях автор может захотеть для предоставления альтернативного текста для фонового изображения, которое , а не «важно» для понимания содержания, но из вежливости для пользователей программ чтения с экрана, которые предпочитают знать, что находится на изображении. Вот подробная статья об эмбиенте изображения против чистого украшения против информационных изображений.

При предоставлении альтернативного текста для изображения CSS количество соображений

Если <дел> внутри тега есть какой-либо контент, то роль = "изображение" а также ария-этикетка может скрыть внутреннее содержимое из-за доступного расчет имени , или вспомогательные технологии могут просто игнорировать ария-этикетка .

Так что не помещайте фоновое изображение CSS в <дел> который содержит любой контент. Лучше всего использовать пустой <диапазон> и ария-этикетка с роль = "изображение"

Сделайте это:
<дел>
<диапазон role="img" aria-label="[разместите здесь замещающий текст]>
[весь остальной контент]