Как сделать фон в html

В этой статье мы рассмотрим два варианта фона: изображение и заливку. Использовать будем таблицу стилей CSS.

Для начала давайте попробуем залить фон каким нибудь цветом например красным «FF0000». Для того, что бы узнать НЕХ коды других цветов достаточно ввести в поисковик запрос «цвета html»

<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background: #ff0000; /* Цвет фона */
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background: red; /* Цвет фона */
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

дает нам точно такой же результат (если вы не заметили я заменил ff0000 на red

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

Как сделать фон в html
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background: green url(http://junior3d.ru/texture/%D0%97%D0%B5%D0%BC%D0%BB%D1%8F/%D0%A2%D1%80%D0%B0%D0%B2%D0%B0/%D1%82%D1%80%D0%B0%D0%B2%D0%B0_11.jpg); /* Цвет фона и путь к файлу */
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

По поводу картинки я просто взял бесшовную текстуру травы, из яндекс картинок. Вообще конечно лучше использовать относительные ссылки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

32 ÷ 16 =