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

Загрузить PDF
Загрузить PDF

Чтобы добавить изображение на веб-страницу, понадобится HTML, а чтобы картинку сделать фоном веб-страницы, необходимы HTML и CSS. HTML (язык гипертекстовой разметки) является стандартизированным языком разметки документов, который указывает браузеру, что отображать на веб-странице. [1] CSS (каскадные таблицы стилей) — это язык описания внешнего вида документа, который используется для изменения внешнего вида и макета веб-страницы. [2] Вам понадобится изображение, которое вы установите в качестве фона веб-страницы.

Часть 1
Часть 1 из 5:

Как создать папку и файл

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/42\/2627945-1-1.jpg\/v4-460px-2627945-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/42\/2627945-1-1.jpg\/v4-728px-2627945-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Присвойте папке имя, по которому ее легко будет найти.
    • Имя папки может быть любым, но лучше, если оно будет состоять из одного короткого слова.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-460px-2627945-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a0\/2627945-2-1.jpg\/v4-728px-2627945-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Если вы не очень заботитесь о том, как ваш сайт будет открываться на старых устройствах или на устройствах с медленным интернет-соединением, используйте изображение с более высоким разрешением. В качестве фона также подойдет изображение с простым повторяющимися узором, потому что на нем будет хорошо виден текст.
    • Если у вас нет изображения, бесплатно скачайте его в интернете и скопируйте в созданную папку.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-460px-2627945-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e0\/2627945-3-1.jpg\/v4-728px-2627945-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Откройте текстовый редактор, а затем создайте новый файл. Сохраните его как index.html.
    • Можно использовать любой текстовый редактор, например, Блокнот в Windows или TextEdit в Mac OS X.
    • Если вы хотите использовать текстовый редактор, предназначенный для работы с HTML, скачайте редактор Atom , который поддерживает Windows, macOS и Linux.
    • Если вы используете TextEdit, перед тем, как начать писать HTML-код, откройте меню «Формат» и выберите «Конвертировать в простой текст». В этом случае HTML-файл будет правильно загружаться в веб-браузере.
    • Мощные текстовые редакторы, такие как Microsoft Word, не очень хорошо подходят для написания HTML-кода, потому что они добавляют невидимые символы и форматирование, которые могут воспрепятствовать правильному отображению содержимого HTML-файла в веб-браузере.
    Реклама
Часть 2
Часть 2 из 5:

Как написать HTML-код

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d9\/2627945-4-1.jpg\/v4-460px-2627945-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d9\/2627945-4-1.jpg\/v4-728px-2627945-4-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Выделите и скопируйте приведенный ниже HTML-код, а затем вставьте его в открытый файл index.html. 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Заголовок страницы </ 
 title 
 > 
 < 
 style 
 > 
 body 
 { 
 background-image 
 : 
 url 
 ( 
 " " 
 ); 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4e\/2627945-5-1.jpg\/v4-460px-2627945-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4e\/2627945-5-1.jpg\/v4-728px-2627945-5-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    В файле index.html найдите строку background-image: url(" "); . Поставьте курсор внутри скобок, а затем введите имя файла фонового изображения. Обязательно укажите расширение файла фонового изображения.
    Реклама
    Указанная строка должна выглядеть как-то так:
    background-image: url("background.png");
    Если ввести просто имя файла (без его URL-адреса или пути к нему), веб-браузер будет искать картинку в папке с HTML-файлом. Если изображение находится в другой папке, введите полный путь к файлу. [3]
  • Сохраните HTML-файл.
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/2627945-6-1.jpg\/v4-460px-2627945-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/2627945-6-1.jpg\/v4-728px-2627945-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Часть 3
    Часть 3 из 5:

    Как просмотреть HTML-файл

    Загрузить PDF
    1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/72\/2627945-7-1.jpg\/v4-460px-2627945-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/72\/2627945-7-1.jpg\/v4-728px-2627945-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Щелкните правой кнопкой мыши по файлу index.html и откройте его в выбранном веб-браузере.
      • Если нужная картинка не открылась в браузере, в окне текстового редактора проверьте, правильно ли введено имя файла с изображением.
      • Если в веб-браузере отобразился HTML-код, а не фоновая картинка, файл index.html был сохранен как документ в формате RTF. В этом случае отредактируйте HTML-файл в другом текстовом редакторе.
    2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f2\/2627945-8-1.jpg\/v4-460px-2627945-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f2\/2627945-8-1.jpg\/v4-728px-2627945-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      В окне текстового редактора поставьте курсор между тегами <body> </body> и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки.
      Реклама
    Часть 4
    Часть 4 из 5:

    Как понять HTML-код

    Загрузить PDF
    1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6d\/2627945-9-1.jpg\/v4-460px-2627945-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6d\/2627945-9-1.jpg\/v4-728px-2627945-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      HTML-код состоит из открывающих и закрывающих тегов. Например, тег <body> является открывающим, а </body> — закрывающим. На каждый открывающий тег должен приходиться соответствующий закрывающий тег, чтобы веб-страница загружалась правильно.
    2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/2627945-10-1.jpg\/v4-460px-2627945-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/2627945-10-1.jpg\/v4-728px-2627945-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Качественный HTML-код должен начинаться с <!DOCTYPE html>. Этот тег сообщает веб-браузеру, что HTML-файл является HTML-файлом.
    3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/2627945-11-1.jpg\/v4-460px-2627945-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/2627945-11-1.jpg\/v4-728px-2627945-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      В окне текстового редактора поставьте курсор между тегами <body> </body> и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки.
    4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/af\/2627945-12-1.jpg\/v4-460px-2627945-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/af\/2627945-12-1.jpg\/v4-728px-2627945-12-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      HTML-код состоит из открывающих и закрывающих тегов. Например, тег <body> является открывающим, а </body> — закрывающим. На каждый открывающий тег должен приходиться соответствующий закрывающий тег, чтобы веб-страница загружалась правильно.
    5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9c\/2627945-13-1.jpg\/v4-460px-2627945-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9c\/2627945-13-1.jpg\/v4-728px-2627945-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Он содержит текст, который отображается в строке заголовка окна браузера, а также текст, отображаемый на вкладке браузера.
    6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/2627945-14-1.jpg\/v4-460px-2627945-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/2627945-14-1.jpg\/v4-728px-2627945-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Он указывает на содержимое CSS. Все, что находится между тегами <style>, является CSS-кодом.
    7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/eb\/2627945-15-1.jpg\/v4-460px-2627945-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/eb\/2627945-15-1.jpg\/v4-728px-2627945-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Любой текст, расположенный между тегами <body>, будет отображаться так, как введен (если это не код HTML или CSS).
    8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/2627945-16-1.jpg\/v4-460px-2627945-16-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/2627945-16-1.jpg\/v4-728px-2627945-16-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      В окне текстового редактора поставьте курсор между тегами <body> </body> и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки.
      Реклама
    Часть 5
    Часть 5 из 5:

    Как понять CSS-код

    Загрузить PDF
    1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/2627945-17-1.jpg\/v4-460px-2627945-17-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/2627945-17-1.jpg\/v4-728px-2627945-17-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      В файле index.html код CSS, расположенный между тегами <style>, указывает веб-браузеру на фоновое изображение с определенным именем, которое находится между тегами <body>.
    2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/2627945-18-1.jpg\/v4-460px-2627945-18-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/2627945-18-1.jpg\/v4-728px-2627945-18-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      3. 3
        body 
 
 { 
 background-image 
 : 
 url 
 ( 
 "background.png" 
 ); 
 }
    3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-460px-2627945-19-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ab\/2627945-19-1.jpg\/v4-728px-2627945-19-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Стили CSS состоят из двух частей: селектора и объявления. [4]
        В нашем примере body – это селектор, а
        background-image: url ("background.png") — это объявление.
        Селектором может быть любой тег HTML.
        Объявления всегда заключаются в фигурные скобки {}.
    4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/2627945-20.jpg\/v4-460px-2627945-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/2627945-20.jpg\/v4-728px-2627945-20.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Объявление CSS состоит из двух частей: свойства и значения. Контент в фигурных скобках
      background-image является свойством, а url("background.png") является значением. [5]
        Свойство описывает предмет (в нашем примере это фоновый рисунок), а значение — стиль предмета (в нашем примере это файл с картинкой).
        Свойство и значение всегда разделяются двоеточием (:).
        CSS-объявления всегда заканчиваются точкой с запятой (;).
      Реклама

    Дополнительные статьи

    Как
    создать простую веб страницу в Блокноте
    Как
    создать простую веб страницу с помощью HTML
    Как
    задать цвет фона в HTML
    Как
    создать ссылку для оплаты через PayPal
    Как
    комментировать в HTML
    Как
    выделить текст жирным с помощью HTML
    Как
    задать ширину и высоту картинки с помощью HTML
    Как
    бесплатно разместить свой сайт в Интернете
    Как
    сделать сайт в Word
    Как
    начать wiki–сайт
    Как
    подчеркнуть текст в HTML
    Как
    создать ссылку на электронную почту в HTML
    Как
    использовать теги цвета шрифта в HTML
    Как
    бесплатно добавить игры на сайт
    Реклама

    Источники

    1. ↑ http://www.w3schools.com/html/html_intro.asp
    2. ↑ http://www.w3schools.com/css/css_intro.asp
    3. ↑ http://www.w3schools.com/html/html_images.asp
    4. ↑ http://www.w3schools.com/css/css_syntax.asp
    5. ↑ http://www.w3schools.com/css/css_background.asp

    Об этой статье

    На других языках
    Эту страницу просматривали 60 190 раз.

    Была ли эта статья полезной?

    Реклама