Веб-Денис
Помогаем создавать лучшее
  • Ответы WP
  • HTML-CSS
  • Фон сайта
  • Блог DM
Главная › Фон сайта секреты

Как правильно поставить фон на сайт HTML и сэкономить своё время?

2022-06-10
Как следует правильно поставить фон на сайте правильно

Всем приветы и ответы!

Вот и пришла речь поговорить про фон на вашем будущем сайте или блоге, а если говорить точнее, о том, как его установить правильно!

Ведь мы моем руки перед едой — это правильно?

С фоном тоже самое!

Так вот!

Как поставить фон на сайте?

У любой страницы в интернете, в теле документа обязательно должен стоять HTML тег <body> с которыми мы будем работать:

Пример html кода на странице сайта

И для решения задачи, нам нужно в файл со стилями CSS под названием style.css, прописать следующий код:

CSS

body {
background:#dddb35 url(img/body.png) repeat;
}

#dddb35 — цвет фона (при отсутствии картинки)
body.png — адрес картинки
repeat — повторяем изображение по оси X и Y

Фон сайта через class или id в HTML шаблоне

Второй вариант может подойти для тех, кто хочет установить на разные страницы сайта свой уникальный фон!

Для этого надо прописать выше указанному тегу <body> уникальный идентификатор (id) или класс (class) в HTML коде:

Уникальный class в html коде
HTML

<body class="body-fon">

или

HTML

<body id="body-fon">

А в CSS стилях собственно говоря прописываем следующее:

для класса (class):

CSS

.body-fon {
background:#dddb35 url(img/body.png) repeat;
}

для идентификатора (id):

CSS

#body-fon {
background:#dddb35 url(img/body.png) repeat;
}

Как не надо изменять фон сайта!

Самая распространённая ошибка у новичков при создании сайта, это прописать фон непосредственно в самом теле HTML документе, прямо в теги <body>

Делать это категорически нельзя!

Неправильно установили стили в html код

Представьте, что вы прописали так фон для сайта на всех страницах, а потом вам захотелось поменять формат изображения с jpg на png!

Так как последний весит меньше, да и картинка более чёткая, и теперь что бегать везде менять код, снова тратить свое время?

Конечно нет, поэтому пользуйтесь только двумя вариантами выше!

На этом у меня всё! Удачных решений!

С уважением, Денис Мехедов
Устанавливаем картинку по центру страницы сайта

Как установить картинку фона сайта в верху?

Четы самых явных ошибки бесшовного фона на сайтее

4 ошибки не бесшовного фона на сайте

А Вы оставите комментарий первым?

    Отменить ответ
    Автор Денис Мехедов
    Привет!

    Я Денис Мехедов.

    Я рассказываю про разные секреты, связанные с бесшовным фоном на сайте!

    • О проекте
    • Автор
    • Контакты
    • Комментарии
    • © Web-Denis 2022
    • Дизайн © ДМ
    • Хостинг Timeweb
    При копировании материалов, ссылка на сайт обязательна.
    Политика конфиденциальности
    Мы cохраняем файлы cookie.