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

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

Дата публикации: 2016-05-25

От автора: приветствую вас на webformyself и хочу сегодня рассказать вам, как изменить фон сайта. Фоновый цвет или изображение на заднем плане могут играть огромную роль в восприятии сайта, поэтому вы должны знать, как его устанавливать.

Как поменять фон в wordpress

Опять же, если у вас движок wordpress, то изменить общий фон у страницы не составит труда. Нужно всего лишь нажать кнопку “Настроить” во вкладке “Внешний вид”. Здесь нужно выбрать “Цвета”. В зависимости от выбранного шаблона, тут может быть возможность выбирать цвета для различных элементов. Но цвет страницы вы можете выбрать в любом случае – перед вами откроется удобная цветовая панель.

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

Собственно, это все, что вам нужно знать. Если нужно загрузить именно фоновое изображение – выбираете соответствующий пункт и находите на компьютере нужный файл.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

По-хорошему, картинка не должна быть слишком тяжелой, потому что это очень сильно ударит по скорости загрузки сайта. Идеально использовать так называемые бесшовные фоновые изображения, которые повторяются по горизонтали и вертикали и так заполняют все пространство.

После загрузки изображения перед вами появиться пару полезных параметров для настройки. Удобство wordpress в том, что вы видите изменения сразу же, в зависимости от того, какие настройки выбираете.

Во-первых, вам предложат выбрать способ повторения. Тут аж 4 варианта: повторять только по горизонтали, только по вертикали, по обеим сторонам и не повторять. В зависимости от того, какое вы используете изображение, вы должны сделать выбор.

Повторение позволяет существенно сэкономить на размере картинки, когда она небольших размеров и может повторяться, так чтобы не было видно резких переходов между повторениями. Так можно экономить десятки килобайт по сравнению со способом, при котором грузится полновесное изображение больших размеров.

Позиция. Тут нечего объяснять, просто посмотрите, как меняется внешний вид страницы с разной позицией фона. Выберете тот вариант, который вам больше нравится.

Привязка. Это очень интересная настройка, она позволяет выбрать, прокручивать ли фоновую картинку вместе с содержимым или зафиксировать его на одном месте. Лично мне всегда нравится выбирать фиксированный вариант, потому что при прокрутке вниз двигаются только блоки с контентом.

Например, если у вас высота фоновой картинки 1000 пикселей, вы ее не повторяете и не фиксируете, то при прокрутке вниз она просто исчезнет из виду. Фиксация фона позволяет картинке постоянно оставаться на виду. Иногда это очень эффектное решение.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Собственно, на этом все по изменению фона в wordpress. Как видите, все максимально просто.

Как изменить фон сайта в html

Хорошо, мы разобрали чисто визуальный вариант, в которой не нужно лезть в код и что-то там прописывать. Теперь давайте разберемся, как все-таки менять фон через html и css. Какие это дает преимущества? Вы можете задавать фоновые изображения не только для сайта в общем, но и для каждого элемента отдельно. Например, для какого-нибудь виджета, меню, шапки и т.д. Это дает гораздо больше возможностей в оформлении сайта и изменении его дизайна.

Для того, чтобы получить доступ ко всему этому оформлению, вам надо найти главную таблицу стилей вашего шаблона. Обычно она располагается в корне, либо в папке css, и называется style.css или main.css.

В ней вы увидите код, который оформляет различные элементы вашего сайта. Если вы хотите задать фон глобально, это можно сделать с помощью прописывания фона селектору body, то есть телу страницы.

Как задается фон?

Запомните – свойство background. Сегодня лучше использовать именно сокращенный вариант записи этого свойства. Например:

Как сделать фон для сайта?

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол « застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.

Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо « заточены » руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html . Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

  • Цвет;
  • Фоновую картинку;
  • Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега . Например:

Читайте также:  Как закаляться с пользой: советы для здоровья


Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:


Установка цвета фона с помощью ключевых слов имеет ряд ограничений по сравнению с остальными двумя способами.

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .


Как видно из кода, привязка изображения происходит через путь url , заданный в скобках. Но не все картинки оказываются такими большими, чтобы своими размерами заполнить всю площадь экрана. Посмотрим, как будет отображаться меньший по величине рисунок.

Предположим, что мы разрабатываем сайт о поэзии, и в качестве подложки нужно использовать изображение Пегаса. Крылатый конь будет олицетворять свободу творческой мысли поэта!

Нам нужно, чтобы изображение отображалось посредине экрана один раз. Но, к сожалению, браузер не понимает наших возвышенных желаний. И выводит меньшую по размерам картинку для фона сайта столько раз, сколько может вместить в себя площадь экрана:

Наверное, четырех улыбающихся лошадей с крыльями поэтам будет чересчур много для вдохновения. Поэтому запрещаем клонирование нашего Пегаса. Делаем это с помощью свойства background-repeat . Возможные значения:

  • repeat-x – повторение фонового изображения по горизонтали;
  • repeat-y – по вертикали;
  • repeat – по обеим осям;
  • no-repeat – повторение запрещено.

Среди перечисленных вариантов нас интересует последний. Перед тем, как поменять фон сайта, используем его в своем коде:


Но, конечно, лучше, если бы наш летун расположился посредине экрана. Свойство background-position как раз и предназначено для позиционирования фонового рисунка на странице. Задавать координаты расположения можно несколькими способами:

  • Ключевым словом ( top , bottom , center, left, right) ;
  • Процентами – отсчет начинается от верхнего левого угла;
  • В единицах измерения ( пикселях ).

Воспользуемся самым простым вариантом центрирования:

Бывает, что нужно зафиксировать положение рисунка при прокрутке. Поэтому прежде, как сделать картинку фоном сайта, воспользуйтесь специальным свойством background-attachment . Принимаемые им значения:

  • scroll;
  • fixed.

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких « метров » займет много времени?

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

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Для наглядности мы добавили текст и задали его цвет с помощью свойства color . Вот что получилось:

Средства CSS

Все свойства, описанные выше, также применимы и для каскадных таблиц стилей. Создадим фон сайта css , переписав код одного из наших предыдущих примеров:

Результат будет аналогичным.

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

Как установить фон для сайта

Каждый популярный сайт сегодня имеет свой собственный уникальный внешний вид. Зачастую мы не обращаем на него внимания, но именно background делает наши любимые ресурсы приятными для глаз. Красивый и качественный фон — первый шаг на пути приобретения популярности.

Делаем новый фон для сайтов

Существуют различные способы отыскать подходящую идею для фонового рисунка:

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

Создаем фон с помощью одного цвета

Это наиболее простой способ создать задний фон. Сегодня так практически никто не поступает. Но если вы решили сделать одноцветный фон, необходимо перейти в файл style.css и отыскать значение – body (оно отвечает за основное тело сайта). Теперь необходимо прописать функцию background-color, если ее не было, и указать код цвета. В том случае, когда вам необходимо создать задний фон для белого сайта, придется прописать следующий код:

background-color: #83C5E9 ; (синий фон, как на примере)

Вы сможете найти полный перечень цветов на сайте – (STM). Для изменения цвета, просто регулируйте значение после двоеточия и наслаждайтесь результатами.

Создание фона при помощи текстуры

Таким образом вы сможете несколько разнообразить задник своего ресурса. Чем он будет интереснее, тем легче для восприятия. Текстуры могут казаться простыми, но очень красивыми, именно поэтому их часто используют. Для того чтобы подключить любую текстуру, ее необходимо загрузить в папку image. Так что вам придётся поработать с настройками в админке своего сайта. После этого необходимо прописать следующий код:

В этом коде есть знакомый нам параметр для поддержания цвета (он зеленый) и элемент, который отвечает за подключение текстуры зеленого цвета.

Делаем фон с помощью градиента

Любое изображение, которое подключается за счет css функций, можно повторять, как по горизонтали, так и по вертикали (по осям X и Y). Такая возможность позволяет нам создать любой красивый фон для сайта css. Начните с создания градиента шириной в 1 мегапиксель (см. картинку ниже), сохраните его, как изображение, и загрузите на хостинг. Далее вам придётся немного поработать с кодом. Вставьте следующие строки:

Читайте также:  Как покрасить мотоцикл

Внутри него используется функция, позволяющая сменить фон. Сразу после неё следует параметр, отвечающий за цвет вашего задника, и функция, повторяющая его по оси X.

Используем большие картинки для фона сайта

Один из наиболее распространённых способов создания фона для сайта. Использование изображений позволяет придать ресурсу индивидуальный и очень привлекательный вид. Для реализации этого метода вам необходимо лишь загрузить большое изображение в папку с картинками сайта и прописать следующий код:

background-image: url(images/название картинки.jpg);

background-position: center top;

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

Для масштабирования изображения существует свойство background-size. Именно оно отвечает на вопрос, как сделать фон в HTML на весь экран. Если установить этот параметр на 100%, фон займёт всю ширину окна браузера.

Вы можете использовать и другие форматы изображения. Например, фон для сайта png так же имеет право на жизнь. Чем более качественное вы берёте изображение, тем лучше оно растягивается на больших мониторах.

Изменяем фон на сайтах Ucoz

Сегодня всё ещё есть вебмастеры, предпочитающие бесплатные хостинги, вроде Ucoz. И специально для них мы приводим инструкцию по изменению фона. Для того чтобы изменить фон сайта на Ucoz, необходимо перейти в панель управления, зайти в «Управление дизайном», а потом в «Редактирование шаблонов».

Теперь необходимо открыть таблицу стилей (CSS), найти строчку «body» и параметр «background». После этого нужно скопировать ссылку и вставить ее в адресную строку браузера. Таким образом вы получите доступ к картинке, которая была фоном.

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

Изменяем фон для сайта на HTML

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

Вам необходимо загрузить своё изображение в галерею и использовать его, для создания фона.

Для тех, кто вообще не хочет думать о фоне, есть такой же простой способ, покрасить его одним цветом:

Изменяем фон блока

Как правило, фон блоков отличается от заданного в background. Ведь вам нужно, что бы текст легко читался, а не сливался с фоновым изображением. И если у вас возникает вопрос, как сделать картинку фоном блока div, то и он решается достаточно легко:

Параметры width и height отвечают за высоту и ширину блока. Его позицию вы так же можете задать вручную. В HTML за это отвечает функция: position.

Заключение

Задний фон вашего сайта играет очень важную роль в повышении его популярности. Известные бренды платят огромные деньги за разработку персонального дизайна. И делается это не просто так. Внешнее оформление ресурса привлекает новых клиентов, а старых мотивирует посещать его снова и снова. Не забывайте, что наиболее распространённый формат мониторов сегодня — FullHD. Всегда проверяйте, как выглядит фон для сайта 1920х1080 — большинство ваших посетителей будут видеть его именно так.

Как поменять фон сайта. Вносим изюминку в шаблон

Всем привет! Ничего ты не понимаешь в жизни вебмастера… Вебмастер! Хочешь посетителей привлекай, хочешь ссылочную массу наращивай, а он фон меняет… Тьфу!

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

Нынешние темы, к большому сожалению, не поддерживают стандартное изменение фона через админку wordpress. И поэтому, сегодняшняя статья будет о том, как поменять фон сайта через файл style.css.

Для данной статьи, я выбрал стандартную тему wordpress — Twenty Ten. Не смотря на то, что в ней есть функция замены фона непосредственно через админку, я сделаю это при помощи style.css.

Как поменять фон сайта. Меняем цвет фона

Итак, я предлагаю изменить фон данной темы с серого, на синий. Что для этого нужно? Нам нужно зайти в файл style.css темы Twenty Ten, которая находиться по адресу:

В этом файле имеется раздел под названием “Global Elements”. Находим строку “body” и указываем цвет фона:

После чего сохраняем файл, загружаем его обратно на хостинг и обновляем страницу сайта.

Как видите, ничего сложного в этом нет. Однако, по моему мнению, такой фон выглядит не совсем красиво, я предлагаю добавить сюда фоновую картинку.

Как поменять фон сайта. Добавляем фоновый рисунок

Итак, для того чтобы поменять фон сайта на картинку, необходимо для начала ее найти и скачать, или же сделать самому в фотошопе. Я подобрал вот такое изображение:

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

Теперь нужно нашу картинку залить на хостинг, по следующему пути:

После того, как рисунок скопирован, необходимо опять же перейти в файл стилей данной темы. О том, как это сделать я писал выше. Далее нам опять понадобиться раздел “Global Elements”, и уже знакомая строка “body”:

Теперь нам нужно прописать путь к нашему изображению. После чего мы произведем еще несколько “манипуляций”, но об этом чуть позже.

Следующим кодом мы указали путь к нашей картинке (blue.jpeg):

Не забывайте, перед началом работы мы заливали картинку на хостинг в папку данной темы, и поэтому сейчас мы можем просто прописывать (images/ blue .jpeg) вместо целого пути.

Давайте посмотрим, как изменился наш body после проделанной работы:

Сохраните изменения, загрузите файл стилей обратно на хостинг и обновите страницу сайта. Как видите, наш фон теперь стал в виде рисунка:

Читайте также:  Как приготовить пасту для холодного салата

Однако, возможно, у Вас будет другая картинка, и Вы не хотите чтобы фон повторялся, тогда в файл стилей следует прописать следующий код:

Таким образом, Ваш body будет выглядеть так:

После того, как Вы запретите изображению повторяться, оно будет отображаться по левому краю, исправить это можно прописав следующий код:

background-position: top center;

Ваш body будет выглядеть так:

Ну что же на этом все. Теперь, когда Вы знаете как поменять фон сайта, Вы сможете легко добавить изюминку в Ваш шаблон. Желаю Вам успехов в сайтостроении. Вопросы и благодарности просьба оставлять в комментариях.

Подпишитесь на обновления блога Life-Webmaster.ru и получайте в числе первых новые статьи про создание блога, раскрутку и заработок на нем!
Подписка по RSS

Очень актуальная тема. Все доступно и понятно.
А как подстроить шаблон шапки блога под свою тему не подскажите?

Давайте чтобы я не расписывал тут все по пунктам, я лучше напишу об этом целую статью и запишу видео, чтобы уж наверняка

Спасибо за доступно изложенную информацию!

Кирилл! Ценю алгоритмичность в объяснении. Спасибо. Было очень полезно. Планирую сайт конно-спортивного клуба. Не устраивают темы, которые предлагаются. Теперь знаю, как добавить изюминку!

Да, отлично объясняешь.. )

Как раз вчера занимался тем, что пытался поменять фон на странице захвата, созданной на джастклик. Пока не получилось, но теперь я представляю путь, по которому нужно идти. Кстати, это очень интересная тема для статьи. Во многих новых шаблонах фон легко поменять, а вот при создании подписной страницы с использованием кодов шаблонов готовых подписных страниц это сделать несколько сложнее для тех, кто не очень разбирается в html. Тем более, что обычно стили css прописываются отдельно и хранятся в специальной папке. Было бы неплохо прописать полный html код сместе со стилями , а графические элементы поместить в файловый менеджер. Тогда для изменения грунта было бы несложно просто поместить необходимые элементы в файловый менеджер и прописать путь к ним в необходимых местах кода.
Я понимаю. что не все может состыковаться с внутренней структурой самого джастклика, там наверняка что-то уже прописано, например коды блока header. А как раз сюда, я так понимаю, грунт и прописывается. Или уже в body? Я пока еще не очень разбираюсь во всем этом, только недавно начал изучать, так что , возможно, что-то и путаю. Но это большая тема, которая была бы полезна для многих начинающих.
Представляю все это как методику создания сайта- одностраничника на удобном для этого ресурсе джастклик, поскольку не нужно создавать сайт отдельно, вы имеете сразу ссылку на ресурс и все необходимые инструменты для набора подписной базы. Имея несколько вариантов шаблонов, можно было бы еще и менять фоны на свои, что очень помогло бы начинающим. Конечно, это большой кусок работы, но я думаю, что ей стоит заняться, поскольку создание подписных страниц- это очень большая проблема для многих.

Полезная информация, но для уникализации шаблона этого мало и нужно как минимум еще поменять шапку сайта и шрифты на сайте.

Есть такой вопрос. Возможно плохо искал, но пока не нашёл. -как сделать фон так, чтобы картинка отображалась вся(целиком по ширине браузера независимо от её собственного разрешения) на экранах разного разрешения. То есть если обрезаю картинку допустим под 1680 по ширине, то следовательно на мониторе с разрешением 1920 по ширине фон будет сдвинут (влево или вправо в зависимости от предустановок) а пустое место занимать выбранный цвет фона. Повторение фона не вариант..
Спасибо

Сам с таким не сталкивался, но суть в том, чтобы картинка автоматически растягивалась при большом расширении экрана. Это надо редактировать файл стилей сайта — CSS. Я не программист, поэтому точно подсказать, какой код нужно вносить, не могу. Попробуйте найти в интернете, наверняка такая проблема кого-то уже интересовала.

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

Очень часто бывает, что вы нашли подходящий фон, но вас немного не устраивает либо оттенок, либо его яркость, контрастность, насыщенность и так далее.

Если у вас есть под рукой Фотошоп, и вы им владеете даже на начальном этапе, то проблем нет. Но когда подобных графических редакторов нет.

В таком случае поможет сервис обработки изображений онлайн. Пожалуй, лучшим из них на данный момент является сервис Pixlr Editor. Это практически Фотошоп онлайн.

Итак, вот такую картинку мы увидим, открыв редактор. Соответственно, следует загрузить картинку с компьютера, либо вставить URL картинки.

Возьмем для примера любой фон. Загружаем его, и открывается окно редактора, очень похожее на интерфейс Фотошопа. Предположим, нам надо изменить оттенок фона и сделать его, скажем, более зеленоватым, под цвет “хаки”. Последовательность действий такая:

  • Слой → Новый слой
  • В левой панели инструментов выбираем “Заливка”
  • В этой же панели инструментов выбираем цветовую палитру и определяемся с цветом. Цвет надо выбрать плотный и интенсивный, потому что потом мы изменим его прозрачность, и останется лишь оттенок.
  • Заливаем новый слой выбранным цветом.
  • В правой панели инструментов в окошке “Слои” находим такой значок и жмем. Опытным путем подбираем прозрачность слоя.
  • При необходимости можно произвести коррекцию тона: Коррекция → Цветовой тон / Насыщенность.

Вот примеры возможных результатов. В примере было использовано вот этот фон.

Еще один важный и полезный инструмент – Коррекция → Яркость / Контрастность. С помощью только этого инструмента можно из светлого фона сделать практически черный.

Это только один из вариантов изменения фона и, пожалуй, один из самых простых. Еще можно просто открыть изображение и сразу перейти к инструменту Коррекция → Цветовой тон / Насыщенность. Часто только одним этим простым шагом можно достичь нужного результата.

Все это вы можете увидеть на видео – т.к. давно известно, лучше один раз увидеть, чем сто раз прочитать . Для более четкого качества изображения воспользуйтесь полноэкранным режимом просмотра.

Оцените статью
Добавить комментарий