Как на сайте поменять фон


Как сделать фон для сайта и как его поменять

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

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

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

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

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

О том, как увеличить скорость загрузки блога я писал в предыдущих статьях: «Плагин Hyper Cache» и «Оптимизация базы данных».

Поэтому в качестве картинки для фона лучше всего использовать ПАТТЕРН.

Паттерн — это небольшая картинка, не имеющая швов, которая при повторении образует большой фон, заполняющий все пространство сайта.

Чтобы сделать фон (паттерн) существует огромное число способов. Например, вы можете открыть любой поисковик и вбить в строку поиска запрос «Скачать фон для сайта», а потом долго просматривать различные сайты в надежде отыскать подходящий паттерн.

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

1) PatternCooler

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

Посмотрите, что у меня получилось выбрать для себя:

2) Stripegenerator

Тоже неплохой онлайн генератор фонов. Есть небольшой ряд настроек и немаленькая база заготовок.

Мой результат работы:

3) BgPatterns

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

Посмотрите, что я подобрал себе:

4) Tartanmaker

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

Как поменять фон на сайтах HTML и PHP

Если вы работаете с сайтом разработанным исключительно на HTML, тогда вам понадобиться вставить фон в открывающий тег <body>... Должно получиться примерно следующее:

<body background="images/fon-1.png">

<body background="images/fon-1.png">

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

<body bgcolor="#FFFFFF" background="images/fon-1.png">

<body bgcolor="#FFFFFF" background="images/fon-1.png">

Если основной паттерн не загрузится, вместо него подгрузится цвет, указанный в bgcolor (FFFFFF).

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

Для этого я закачиваю картинку (паттерн) на хостинг, папка находится по такому адресу:

/httpdocs/wp-content/themes/Prosumer/images

/httpdocs/wp-content/themes/Prosumer/images

Затем необходимо открыть файл style.css и указать адрес, где хранится ваше изображение.

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

Перезагружаем страницу сайта и смотрим полученный результат.

P.S. Еще хотелось бы добавить, что вы можете настраивать как будет повторяться паттерн. Для этого существует атрибут repeat.

background: #FFFFFF url(images/fon-1.png) repeat;

background: #FFFFFF url(images/fon-1.png) repeat;

Основные настройки:

  • — repeat — изображение будет повторяться как по вертикали, так и по горизонтали;
  • — repeat-x — повторение только по горизонтали;
  • — repeat-y — повторение только по вертикали;
  • — no-repeat – запрет на повторение.

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

Посмотрите видео «Как поменять фон на сайте» и у вас не должно остаться никаких вопросов.

На сегодня у меня все. Понравилась статья? Подпишись на обновления страниц блога по почте и будь в курсе новых постов, новостей и конкурсов. Жду отзывы и дополнения в комментариях. Пока!

Более простой способ изменить фон изображения в Интернете

Я буду краток: вы можете заменить фон фотографии без необходимости глубоких навыков Photoshop. На самом деле, вам вообще не нужны навыки редактирования фотографий. Как это может быть?

«Эта фотография идеальна, за исключением фона, который ...» ну, скажем так, «плохой». У вас когда-нибудь возникала такая мысль? Вы, наверное, даже пытались отредактировать изображение с испорченным фоном в фоторедакторе, но безрезультатно.Конечно, не все из нас дизайнеры или, по крайней мере, разбираются в ИТ. Итак, у остального человечества есть способ изменить фоновую сцену любой фотографии - онлайн-инструмент PhotoScissors.

Шаг 1. Выберите фотографию, которую хотите отредактировать

Откройте PhotoScissors в Интернете, нажмите кнопку «Загрузить» и выберите файл изображения. Программа удалит фон с изображения и отобразит его в браузере:

Левая часть экрана предназначена для редактирования, а правая часть отображает окончательный результат.

Обычно вам придется повозиться с различными инструментами выделения, но PhotoScissors автоматически удаляет фон с изображения, и даже если нейронные сети допустили ошибку, вы можете исправить результат, используя красный и зеленый маркеры. Щелкните зеленый маркер на панели инструментов и отметьте объекты на переднем плане. Затем выберите инструмент «Красный маркер» и таким же образом отметьте фоновые объекты.

Все просто, правда? Зеленый - для объектов, которые должны остаться, красный - для фона, который нужно изменить.Обратите внимание, что когда вы помечаете изображение зелеными и красными инструментами, предварительный просмотр с правой стороны отражает любые внесенные вами изменения. По умолчанию PhotoScissors применяет к изображению прозрачный фон.

Шаг 2: Смена фона

Теперь, чтобы заменить фон фотографии, переключитесь на вкладку Фон в правом меню.

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

Ницца! Этот фон выглядит намного лучше. И это не заняло много времени. Наконец, сохраните фотографию с замененным фоном, нажав кнопку «Сохранить» на панели инструментов.

Попробовать сейчас: загрузить изображение или Скачать PhotoScissors .

css - Как я могу изменить фон сайта с помощью Bulma?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд
.

javascript - как изменить цвет фона моего сайта на интервале

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

javascript - Как изменить цвет фона сайта в адресной строке браузера?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частным номером
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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