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

1 методика:Типы стилей:

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

Шаги

1. 1 Откройте основной .css файл в редакторе ваших разработок. Основной .css файл содержит список CSS классов/ids, относящихся к области основного содержания веб-страницы в алфавитном порядке. Вы не должны отклоняться от этих классов. IDs расположены сразу за классами - тоже в алфавитном порядке. http://pad2.whstatic.com/images/thumb/c/c9/Set-a-Background-Image-in-HTML-Step-1-preview.jpg/550px-Set-a-Background-Image-in-HTML-Step-1-preview.jpg http://pad2.whstatic.com/images/thumb/c/c9/Set-a-Background-Image-in-HTML-Step-1-preview.jpg/300px-Set-a-Background-Image-in-HTML-Step-1-preview.jpg http://d5kh2btv85w9n.cloudfront.net/6/60/Set a Background Image in HTML Step 1.360p.mp4
   • Не думайте, что это сработает: Множество веб-сайтов предлагают предварительно созданные Div overlay, с инструкциями о том, как использовать ваши изображения и другое, и где "вставить” соответствующий код.
   • Знайте, что структура веб-сайта определяется CSS классами для HTML элементов. Эти классы, также содержат информацию о том, как будет выглядеть финальный вариант, созданный HTML документом. Используйте HTML для содержания (контента); CSS для внешнего вида. Просмотренный документ закодирован в HTML, и новые структуры будут ограничены в стиле CSS классами и IDs. Финальный документ будет построен по результатам применения классов к HTML структуре.
2. 2 Создайте и установите фоновое изображение, как часть тега BODY, для любой странички данного .css файла. В самом верху CSS документа (в вашем открытом файле), вы можете добавить код, схожий с тем, который представлен ниже. http://pad1.whstatic.com/images/thumb/8/86/Set-a-Background-Image-in-HTML-Step-2-preview.jpg/550px-Set-a-Background-Image-in-HTML-Step-2-preview.jpg http://pad3.whstatic.com/images/thumb/8/86/Set-a-Background-Image-in-HTML-Step-2-preview.jpg/300px-Set-a-Background-Image-in-HTML-Step-2-preview.jpg http://d5kh2btv85w9n.cloudfront.net/2/2d/Set a Background Image in HTML Step 2.360p.mp4
   • Исключение, CAVEAT: Очевидно, это изображение может быть проигнорировано в HTML, если таблица стилей самостоятельно задает фон. Вы можете выставить достаточно простой фон, задавая белое или тонированное фоновое изображение (белая или тонированная плитка), установленное в таблицу стилей, или сама таблица позволяет установку фона в одном из стилей, представленных ниже.
   • BODY { text-align:center; background: url(img/name_of_picture.jpg) center; } /* здесь, вы можете оставить комментарий */
     • Если вы используете большое изображение, которое может покрыть страничку полностью, то в предыдущем примере добавьте "no-repeat”, после "center”. Иначе, изображение будет повторяться, заполняя ваш фон.
3. 3 Вы можете достичь этого результата несколькими способами. Несколько примеров:[3] http://pad2.whstatic.com/images/thumb/2/2c/Set-a-Background-Image-in-HTML-Step-3-preview.jpg/550px-Set-a-Background-Image-in-HTML-Step-3-preview.jpg http://pad3.whstatic.com/images/thumb/2/2c/Set-a-Background-Image-in-HTML-Step-3-preview.jpg/300px-Set-a-Background-Image-in-HTML-Step-3-preview.jpg http://d5kh2btv85w9n.cloudfront.net/b/be/Set a Background Image in HTML Step 3.360p.mp4
   • BODY { background: url(banner.jpeg) 50% 0% }
   • BODY { background-image: url(banner.jpeg); background-position: top center; }
   • BODY { background: url(banner.jpeg) top left }
   • BODY { background: url(banner.jpeg) 0% 0% }
   • P { background: URL(chess.png) gray 50% repeat fixed }
4. 4 Поставьте нужный URL и название файла в указанном месте, также, как адрес и название изображения. http://pad2.whstatic.com/images/thumb/7/7a/Set-a-Background-Image-in-HTML-Step-4-preview.jpg/550px-Set-a-Background-Image-in-HTML-Step-4-preview.jpg http://pad2.whstatic.com/images/thumb/7/7a/Set-a-Background-Image-in-HTML-Step-4-preview.jpg/300px-Set-a-Background-Image-in-HTML-Step-4-preview.jpg http://d5kh2btv85w9n.cloudfront.net/5/5f/Set a Background Image in HTML Step 4.360p.mp4
5. 5 Проверяйте результат: после того, как вы введете один из представленных выше примеров, сохраните ваш документ, и откройте веб-сайт, чтобы проверить получившийся результат! http://pad3.whstatic.com/images/thumb/9/9b/Set-a-Background-Image-in-HTML-Step-5-preview.jpg/550px-Set-a-Background-Image-in-HTML-Step-5-preview.jpg http://pad3.whstatic.com/images/thumb/9/9b/Set-a-Background-Image-in-HTML-Step-5-preview.jpg/300px-Set-a-Background-Image-in-HTML-Step-5-preview.jpg http://d5kh2btv85w9n.cloudfront.net/8/8e/Set a Background Image in HTML Step 5.360p.mp4

Типы стилей:

1. 1 Научитесь использовать эти стили, избегая избыточные и разбросанные методы; другими словами, централизуйте ваш код: [4] http://pad2.whstatic.com/images/thumb/0/07/Set-a-Background-Image-in-HTML-Step-6-preview.jpg/550px-Set-a-Background-Image-in-HTML-Step-6-preview.jpg http://pad2.whstatic.com/images/thumb/0/07/Set-a-Background-Image-in-HTML-Step-6-preview.jpg/300px-Set-a-Background-Image-in-HTML-Step-6-preview.jpg http://d5kh2btv85w9n.cloudfront.net/f/f4/Set a Background Image in HTML Step 6.360p.mp4

Избегайте "inline-стили”, которые записываются в тегах вашего документа. Inline-стили влияют только на те теги, в которых они указаны, например: <a href="" style="text-decoration: none;"> Избегайте "встроенные стили”, которые встроены в "голову” каждого документа. Поймите, что встроенные стили являются излишними. Они повторяются и влияют только на те теги, в которых они записаны, например: <style type="text/css"> p { color: # 00f; }</style> Делайте ссылку на внешние стили, которые описаны в отдельном документе и связаны с различными страничками веб-сайта, для упрощения программирования на каждой страничке. Таблицы внешних стилей могут влиять на любой документ, с которым они связаны, например: <link rel="stylesheet" type="text/css" href="styles.css" />

1. 1 Используя лучшие методы работы с CSS, которые рекомендуются для заголовков и текста (баннеров страничек, колон, шрифтов, размеров и внешнего вида), а также для изображений (размеры, границы, закругленные углы, и так далее) в таблицах внешних стилей для отображения связанных веб-страниц на вашем веб-сайте, вы сужаете ваш код и ускоряете загрузку страниц. http://pad1.whstatic.com/images/thumb/8/83/Set-a-Background-Image-in-HTML-Step-10-preview.jpg/550px-Set-a-Background-Image-in-HTML-Step-10-preview.jpg http://pad3.whstatic.com/images/thumb/8/83/Set-a-Background-Image-in-HTML-Step-10-preview.jpg/300px-Set-a-Background-Image-in-HTML-Step-10-preview.jpg http://d5kh2btv85w9n.cloudfront.net/b/b8/Set a Background Image in HTML Step 10.360p.mp4
2. 2 Используйте каскадные таблицы стилей, чтобы перебрасывать наследственность на любую страничку, связанную с этим стилем CSS кода. Конечно, вы можете использовать больше, чем одну таблицу стилей для разных страниц (главная, галерея, статьи, списки, и так далее), но заметьте, что они могут быть объединены, только если стили и IDs последовательны, ограничены и вызываются там, где нужно. http://pad1.whstatic.com/images/thumb/e/e0/Set-a-Background-Image-in-HTML-Step-11-preview.jpg/550px-Set-a-Background-Image-in-HTML-Step-11-preview.jpg http://pad1.whstatic.com/images/thumb/e/e0/Set-a-Background-Image-in-HTML-Step-11-preview.jpg/300px-Set-a-Background-Image-in-HTML-Step-11-preview.jpg http://d5kh2btv85w9n.cloudfront.net/c/cd/Set a Background Image in HTML Step 11.360p.mp4

Советы

• "Div overlay становятся наиболее популярным способом украшения учетных записей MySpace, без особого знания HTML. Использование предварительно созданной Div overlay зависит от того, где вы желаете использовать код. Существуют несколько веб-сайтов, которые предлагают предварительно созданные коды Div overlay, и даже такие веб-ресурсы, которые помогают с созданием собственной. Вам не обязательно иметь большой опыт с HTML, но важно понимать его основы, для использования вместе с CSS. [5]
• Встраивание – в цифровых технологиях – это использование текста, изображения, звука, <a href="http://cityadspix.com/click-BQB3V890-SLZKVXTQ?&bt=20&pt=9&lt=1&tl=1" target="_blank" alt="dokolena.ru" title="dokolena.ru" style="">видео</a> или компьютерного кода в компьютерном файле, HTML документе, программном продукте, или электронном устройстве: чтобы встроить "изображения в ваш веб-сайт”; чтобы встроить "программное обеспечение в машинах и самолетах для работы двигателя, мониторинга или для навигации, и так далее.”
• Чтобы установить фон, возможно, вам придется изменить стиль самой странички.

Предупреждения

• Ваши изменения могут быть отклонены в связи с настройками CSS файла.