Как сделать фон страницы?

2 ноября 2014 г. Просмотров: 651
Современный рынок фриланса открывает широкие возможности для заказа разработки и модификации сайта у специалистов. Это позволяет совсем не вдаваться в технические детали и различные аспекты создания web-страниц. Но что, если ваш сайт состоит всего из нескольких документов, а необходимо только лишь сделать фон страницы определенного цвета или разместить в нем картинку. Привлечение специалиста оказывается неоправданно дорогим. Но подобную мелочь можно сделать самому всего за несколько минут.
Создать сайт самостоятельно с Wix.com

Вам понадобится

  • Текстовый редактор, браузер.

Инструкция


  • Откройте страницу в браузере. Это нужно для того, чтобы контролировать вносимые изменения. Нажмите Ctrl+O, выберите в меню пункты "File" и "Open File", либо просто перетащите html-файл в окно браузера.

  • Откройте файл страницы в текстовом редакторе. Редактор может быть любой. Он должен поддерживать редактирование текста в той кодировке, в которой текст представлен в html-файле.

  • Найдите в тексте html-разметки закрывающий тег элемента HEAD. Элемент HEAD размещается в самом начале текста, непосредственно за начальным тегом элемента HTML. Закрывающий тег элемента HEAD будет выглядеть так: .

  • Добавьте элемент STYLE перед закрывающим тегом элемента HEAD. Для этого перед текстом добавьте текст:

  • Добавьте пустой список правил с селектором BODY в элемент STYLE. Для этого между комментариями вставьте текст:BODY
  • {

    }

  • Сделайте фон страницы залитым серым цветом. Для этого добавьте в только что созданный список правил следующее правило:background-color : #CCCCCC;Измените значение #CCCCCC на другое, если необходим другой цвет фона. Здесь каждые два следующих последовательно символа задают интенсивность красного, зеленого и синего цветовых каналов в шестнадцатеричной системе счисления. Например, чтобы сделать фон страницы зеленым, напишите значение #00FF00. Можно также использовать мнемонические обозначения цветов. Например, red, green, blue, yellow.Проконтролируйте сделанные изменения, обновив страницу в браузере.

  • Сделайте фон страницы заполненным изображением. Добавьте в список правил с селектором BODY правило background-image:background-image : url("weather-mist.png");Здесь weather-mist.png - url изображения, которое будет заполнять фон страницы. Обновите страницу в браузере для того, чтобы увидеть изменения.

  • Сделайте фон страницы, состоящим из одного изображения. Добавьте в список правил с селектором BODY правила background-repeat и background-position:background-repeat : no-repeat;
  • background-position : 5px 5px;Значение no-repeat указывает на то, что изображение не должно дублироваться ни по горизонтали, ни по вертикали. Значения 5px и 5px задают отступы фонового изображения слева и сверху соответственно.

    Оцените статью!