ИТ

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

29.07.2015
1.7 тыс.
1.1 тыс.
5 мин.
1

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

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

Содержание:

  1. Целиком
  2. Фрагментами
  3. Файл CSS
  4. Видео уроки

Нюансы дизайна мы сейчас рассматривать не будем, поскольку об этом написаны много книг и в интернете можно найти множество статей как с картинками, так и с видео уроками. Однако сейчас мы поговорим немного о другом.

Из сегодняшней статьи вы узнаете, как можно сделать картинку фоном в html странице.

Существует много визуальных редакторов html кода, самым известным из которых является Dreamweaver, он же «Дрим» - это название применяют многие вебмастера. Эта программа настолько идеальна и интуитивно понятна, что даже новичку можно легко сделать самую простую html страницу сайта. А если вы не пожалеете свое время и изучите эту программу подробнее, то сможете легко создать полноценный сайт, который оценят даже заказчики. Не пожалейте своего личного времени, так как потом эти знания помогут вам заработать деньги и даже получить новую работу.

Однако вернемся к главной теме статьи о том, как сделать картинку фоном в html странице.

Существует два основных способа – сделать картинку фоном в html странице: целиком или же заполнить ее фрагментами рисунка, размножив его по всей поверхности.

Целиком

Для первого способа нужно найти в интернете или самому сделать изображение такого размера, чтобы оно полностью заполняло задний фон страницы. При этом учтите, что у каждого монитора выставлено свое разрешение, поэтому не забывайте об этом. Тем более, что сейчас много пользователей заходят на сайты с мобильных устройств (телефоны, смартфоны, планшеты). Такой вид путешествия по интернету становится все более популярным, ведь уже не редкость в маршрутке или просто на улице встретить человека, который что-то ищет на просторах интернета, используя свой телефон. Но тут есть нюанс. Чтобы сайт правильно и красиво открывался на мобильных устройствах, должен быть полностью «Responsive», то есть адаптивным (резиновым). Какими способами это можно сделать мы рассмотрим в других статьях.

Фрагментами

Для второго способа достаточно подобрать изображение, которое лучше всего найти в интернете под запросом «фон для сайта» в меню «картинки». Поскольку такие изображения специально предназначены для того, чтобы размножить его по всей поверхности html страницы, они уже изначально обработаны так, чтобы их грани идеально продолжали свой узор (как при правильной поклейке обоев, например), и по внешнему виду будет совсем незаметно, что это лишь небольшой квадратик с рисунком.

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

Для этого применяются специальные коды, которые нужно внести в страницу в предназначенное для этого место. Для этого используйте тот же Dreamweaver, в котором можно легко разделить страницу на две части – как она будет выглядеть и собственно сам код. Когда вы вносите изменения в код, ниже сразу можете увидеть результат своей работы. Для опытных пользователей больше подойдет программа Notepad++, но в ней визуально не видно результатов внесенных изменений.

Итак, вернемся к первому способу – внесение кода в отдельно взятую страницу сайта.

За выполнение этой задачи отвечают определенные команды, которые нужно внести в исходный код документа, причем в правильное место. Если вы пользуетесь редактором Notepad++, то вы наверняка знаете, куда правильно вставить код. А для новичков специалисты советуют использовать Dreamweaver, поскольку, как упоминалось выше, результат будет виден сразу в окне внизу.

Главный атрибут, который отвечает за фоновое изображение называется background и вставляется после заключительного элемента, который означает конец шапки страницы ().

Пример вставки такого кода:

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

Команды и обозначают шапку страницы, в которой тоже находится содержимое – картинка, ключевые слова, и название страницы (). Эту информацию используют поисковые системы при ранжировании сайта в результатах выдачи при поиске.

Но вернемся к тому, как сделать картинку фоном.

Как мы уже говорили выше, за это отвечает команда background, а в нашем примере использован еще и атрибут bgcolor. Он предназначен для того, чтобы задать точный цвет фона, который будет контрастным к цвету букв (text="red"). В нашем примере фон белый, а буквы красного цвета. Это нужно для того, чтобы, когда вы будете использовать браузер, который не поддерживает загрузку фоновых изображений, вы все равно могли прочитать текстовое содержимое страницы.

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

Перечислим еще команды, с которыми используется этот атрибут.

background-position – задаёт, где именно на странице будет размещено изображения (left, center, right, top, bottom).

background-attachment – устанавливает, будет ли изображение прокручиваться вместе с документом или займёт фиксированное положение (fixed, scroll, local).

Если вы скачали небольшой кусочек изображения и хотите размножить его по всей странице, тогда используйте команду background-repeat – она устанавливает, как будет повторяться изображение (repeat-x, repeat-y, space, round, no-repeat).

Теперь коснемся файла CSS

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

Что качается фонового изображения, то для файла CSS команда прописывается иначе. Ниже приведен пример.

.blokbg1 {
background-image: url('/images/uzor.jpg');
background-repeat: repeat;
background-attachment: scroll;
}

Видео уроки