Как поменять фон страницы сайта

Опубликовано: 09.11.2018 в категории: Создание сайта

Как поменять фон страницы на сайте? Обычно этот вопрос возникает перед новичками, которые создали свой ресурс недавно или занимаются этим в настоящее время. Это первое, с чего начинается улучшение или смена дизайна сайта. Тем более, если вы скачали и установили бесплатный стандартный шаблон, поменять его дизайн просто необходимо. Так как этот шаблон будет установлен на многих других ресурсах, а поисковикам подавай уникальность.
Поменять фон страницы совсем не сложно, после прочтения этой статьи, процедура замены фона не займет много времени.
Фоном сайта может быть просто определенный цвет, а может быть и рисунок.
Прописывается фон в файле style.css, который расположен в папке вашей темы. В вордпресс например он будет лежать в следующей директории: public_html или httpdocs (в зависимости от того, на каком хостинге находится ресурс)/wp-content/themes/ваша тема/style.css. Обычно в начале этого файла расположен контейнер «body». Ищите в нем значение «background», именно оно определяет фон.

Фоном может быть просто цвет.

В «background» может быть прописан так, например красный:

body {
........
background: #ff6633;
.......}

В этом случае, чтобы поменять фон страницы необходимо просто проставить свой цвет. Узнать код цвета можно здесь: Палитра цветов html

Фоном может быть и рисунок.

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

body {
background: url(images/my_image.jpg) no-repeat;
}

где: images/my_image.jpg — путь к файлу изображения.
no-repeat — указывает на то, что изображение не повторяется. Может быть так же: repeat — повторяется по оси X — горизонтально, и по оси Y — вертикально и заполняет фон страницы;
repeat-x — будет повторяться только по горизонтали;
repeat-y — только по вертикали;
Зачем нужно повторять фоновый рисунок, спросите вы. А например для того, чтобы замостить фон каким-нибудь узором.

поменять фон страницы
Чтобы поменять фон страницы на свое изображение, закиньте файл изображение к себе на хостинг в папку с изображениями вашей темы, обычно папка images и пропишите свой путь к файлу в параметре background.
Параметр background позволяет прописывать 5 атрибутов стилей и не только для фона, но и для других элементов страницы.
background-attachment, background-color, background-image, background-position, background-repeat
Эти свойства можно прописать в CSS и раздельно.

background-attachment: : fixed: // или scroll - прокручивать или нет фоновое изображение
background-color: #ff6633; // цвет фона страницы
background-image: url(images/my_image.jpg) no-repeat; //изображение
background-position: right bottom; // положение фона
background-repeat: no-repeat; //повторение картинки

Положение фона background-position может быть:
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
center bottom =bottom center = bottom =   50% 100% (по центру внизу)
right bottom = bottom right = 100% 100% (в правом нижнем углу)

С помощью всех этих свойств можно сделать и такой фон:фон для сайта

На этом все. Сейчас вы знаете как поменять фон страницы сайта и как установить фоновое изображение. А здесь можете подобрать красивое изображение для хедера (шапки) вашего сайта.

бесплатная накрутка подписчиков вконтакте

Самое читаемое:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Заявка на бесплатную консультацию

Для бесплатной консультации укажите свое имя и номер телефона в форме ниже. Я перезвоню Вам и отвечу на все вопросы.

    Даю свое согласие на обработку персональных данных.

    ×
    Заказать сайт

    Чтобы заказать сайт заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, приму Ваш заказ и назову его ориентировочную стоимость.

      Даю свое согласие на обработку персональных данных.

      ×
      Заказать сайт по акции "Все включено"

      Для заказа сайта по акции «Все включено» заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, и приму Ваш заказ.

        Даю свое согласие на обработку персональных данных.

        ×
        Заказ услуги

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

          Даю свое согласие на обработку персональных данных.

          ×