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


Оглавление (нажмите, чтобы открыть):

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

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

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

Как сделать картинку фоном сайта

Пример заполнения фона картинкой можем взять с сайта i-won.ru (на момент написания статьи). Изображение pattern21.png имеет размер 100x100px и заполняет весь экран слева-направо и сверху-вниз. Изменив картинку мы получим другой фон на сайте.

Пример CSS кода для создания фона сайта из картинки

Так выглядит изображение pattern21.png

Итак, чтобы сделать картинку фоном сайта необходимо:
1) Выбрать картинку и разместить ее на хостинге;
2) Изменить в файле стилей CSS код описания тега body, добавив тег background-image с указанием пути до вашей картинки;
2) Сохранить изменения и посмотреть результат.

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

Как сделать фон на сайте на весь экран

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

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

Как сделать фон сайта нужного цвета

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

В случае с цветом мы поступаем аналогично, но указываем вместо пути до картинки фона — код цвета. При этом заменяем тег background-image (картинка) на background-color (цвет).

body <
background-color: #f5f5f5; /* код цвета */
>

Чтобы подобрать нужный цвет и оттенок вы можете воспользоваться бесплатным онлайн инструментом Color Picker

Как сделать двухцветный, градиентный фон сайта

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

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

Как сделать видео фоном сайта

Установка видео в качестве фона сайта, достаточно подробно описана в статье: Как установить видео фон на сайт. На главной странице сайта вы сможете посмотреть видео бэкграунд в действии.

Для сайтов на WordPress, тоже можно воспользоваться описанным в статье приемом либо, воспользоваться бесплатным плагином mb.YTPlayer for background videos или более продвинутыми платными плагинами Plugins Video Background WP.

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

Выводы

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

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

А на сайтах интернет магазинов, на большей части лендингов (продающих страницах), на бизнес и корпоративных сайтах — лучше использовать однотонные, спокойные фоны.

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

  • Как изменить фон сайта
  • Фиксированный полностью фон
  • Наложение полного градиента на фон
  • Как сделать картинку фоном сайта

Свойства и значения для фона

  • background-attachment: позволяет фоновому изображению быть зафиксированным, или прокручиваться с основным контентом, в зависимости от выбранного значения ( fixed | scroll );
  • background-color: позволяет определить цвет фона страницы, в зависимости от выбранного значения ( #. | transparent );
  • background-image: отображает фон страницы в виде указанной картинки (фото) и имеет два значения ( url() | none );
  • background-repeat: позволяет повторяться рисунку указанному в background-image в разных направлениях, в зависимости от выбранного значения ( no-repeat | repeat | repeat-x | repeat-y ).

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

Однотонный цвет фона (для примера: розовый)

Код Фон градиент с рисунком для фона

Пример фона градиент с рисунком

Фиксированный фон

Код для фиксированного фона

Наложение полного градиента на фон

Код полного градиента для фона

Как сделать картинку фоном сайта

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

Маленькие картинки использовать не рекомендуется, так как при увеличении будет падать качество, да и во-вторых: опять же проблемы с IE — он просто так не увеличивает фото, для этого ему необходимы дополнительные коды и скрипты.

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

Фон для сайта – довольно важный элемент любого дизайна. Особенно это замечают те люди, у которых большое разрешение монитора, ведь если в среднем ширина любого блога порядка 1000 пикселей, то при разрешении экрана 1920×1080 – 920 пикселей будет занимать задний фон сайта – по 460 пикселей с одной и с другой стороны, довольно большое пространство, и над ним стоит поработать!

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

  • Фон сайта должен дополнять блог визуально и создавать привлекательную атмосферу для чтения.

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

Итак, три вида фона сайта:

  1. Обычный цвет. Чаще всего используется белый (#fff), либо тот, который лучше подойдет и дополнит цветовую схему блога.
  2. Небольшая картинка, которая дает бесшовный фон. Здесь для фона используется картинка небольшого разрешения, которая повторяется по всей “фоновой” ширине и высоте. Но изображение должно быть не совсем обычное – любое не подойдет, так как мы будем достигать бесшовного эффекта – об этом ниже.
  3. Большая картинка + фоновый цвет. Эффектный прием, который выделит Ваш блог из многих и при грамотном подборе изображения произведет приятное впечатление на посетителя и обязательно задержит его на сайте.

Для того чтобы поставить или поменять фон на сайте нам потребуется отредактировать файл стилей style.css. Применять различные виды фона я буду на сайте https://kakje.ru/ на котором установлен WordPress и пошагово описывать свои действия.

Прежде всего нам нужно найти этот файл. Для этого заходим в админку, наводим на вкладку “Внешний вид” и нажимаем “Редактор”:

  1. Убеждаемся что для редактирования открыт файл style.css взглянув на правый нижний угол страницы.
  2. Находим стили для общего блока страницы: слово body.

На этом подготовительная работа закончена. Пора приступать к делу!

Как изменить фоновый цвет сайта.

Изначально сайт выглядит вот так:

  • При отсутствии прописанного стиля background – фон по умолчанию белый;
  • Если у Вас уже прописан background, то просто замените его (удалите и пропишите заново). Предварительно скопируйте его в блокнот!

Теперь давайте попробуем изменить фоновый цвет. Для этого дописываем с стилях body вот эту строчку с кодом цвета:

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

И теперь наш сайт выглядит вот так:

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

Картинка для фона сайта – бесшовный фон.

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

Принцип картинки для такого фона: если к ней вплотную подставить справа и снизу такую же, то будет осуществлен плавный переход (без шва):

Мастер Йода рекомендует:  Краткое введение в Bootstrap

Найдите подобную картинку в интернете – их очень много, либо нарисуйте ее сами используя этот принцип.

Чтобы использовать картинку в качестве фона первое что нужно сделать – это закачать ее на свой хостинг – обязательно! и узнать путь до нее, а затем прописать в стилях body эту строчку (со своим путем до картинки!):

И теперь наш сайт выглядит вот так:

Красивый фон для сайта – большая картинка + фоновый цвет.

В этом случае мы используем в качестве фона (background) одну большую картинку, которая не повторяется и находится всегда сверху и по центру на сайте + подходящий фоновый цвет. Немного порыскав по интернету я нашел отличную картинку, которая бы идеально подошла для фона кулинарного блога, вот ее уменьшенная копия:

Обратите внимание на то, что данная картинка плавно перетекает слева, справа и снизу в однотонный цвет. Через фотошоп я посмотрел, что код этого цвета: #e7daae – его то и будем применять как основной в том месте, где заканчивается картинка.

После нескольких вариаций я получил вот такой фон:

Для такого отображения я дописал в файл style.css следующие строки:

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

Фон для сайта: принципы дизайна и его основные виды

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

Виды фонов для сайта

Сайтов существует множество, но все сайты можно классифицировать по виду фона. Это — неотъемлемый элемент любого ресурса, поэтому так или иначе сайт имеет общие характеристики с другими сайтами. Рассмотрим основные типы фонов и определим, когда лучше использовать каждый из них.

Белый классический фон

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

Мы также на своем сайте и в своих работах часто используем белый фон:

Почему белый фон настолько популярен у дизайнеров?

  1. Легкость в восприятии. Как правило, использование белого фона предполагает легкую читабельность текста, из-за контраста все элементы хорошо видно, они не сливаются с фоном. Используются даже элементы белого цвета — их выделяют с помощью тени и других эффектов.
  2. Универсальность. Можно использовать элементы любой цветовой гаммы и стиля: белый цвет универсален и подходит под любую тематику.
  3. Простота. С белым фоном можно сделать относительно простой дизайн, который в то же время будет стильно смотреться и не отвлекать пользователей от главной цели — приобрести товар или услугу. Также использование белого фона не имеет никаких сложностей в реализации, в сравнении, например, с видеобэкраундом.
  4. Все внимание на элементы. Белый цвет не отвлекает внимание пользователя и позволяет сосредоточить его поведение на более важных вещах, чем красивый дизайн — прилечь внимание к призывам к действию, важной информации, способу оформления заказа, популярным товарам и прочее.

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

Однотонный цветной фон


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

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

Градиент

Тренд современного веб-дизайна — фон с использованием градиента. Мы писали об этом здесь.

Градиентный фон обладает рядом преимуществ, по сравнению с обычным однотонным фоном:

  • выглядит стильно и свежо. Градиенты вошли в моду в 2020-2020 годах и все еще пользуются большой популярностью. С помощью градиента можно подчеркнуть, что компания современная, следит за трендами;
  • позволяет управлять вниманием пользователя. Так как градиент обычно состоит из переходов одного цвета в другой, можно с помощью этого «движения» цвета перемещать взгляд пользователя и направлять его к нужному элементу — например, к призыву к действию;
  • яркий дизайн. Так как в градиенте используются несколько цветовых оттенков, страница получается яркой и насыщенной. А благодаря плавному переходу из одного цвета в другой, это не так бросается в глаза и не отвлекает внимание пользователя.

Градиент в качестве фона до сих пор остается популярным приемом при создании дизайна макета. Подход в основном используется на сайтах развлекательного характера, ресурсах, в которых важно подчеркнуть «современность» компании, на промо-сайтах и так далее.

Паттерны и текстуры

Еще один прием — использование паттернов и текстур. Раньше это было в тренде и можно было встретить такие сайты на каждом втором ресурсе, где использовались фон в виде дерева или металла, все кнопки были объемными, с различными эффектами в виде теней или блеска. Однако, с развитием технологий и веб-дизайна в частности, такие текстуры считаются устаревшими и практически не используются в современных сайтах. Сейчас этот прием несколько трансформировался и теперь дизайнеры используют яркие рисованные паттерны, текстуры без объема:

Подробнее о применении паттернов и текстур в современном веб-дизайне мы писали в этой статье.

Большое изображение

Еще один тренд в веб-дизайне — использование больших изображений в качестве фона.

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

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

Видеобэкграунд

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

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

Мы перечислили основные типы фонов для сайта. Однако, остаются вопросы, которые волнуют всех дизайнеров:

  • как правильно выбрать?
  • каким принципам следовать, чтобы бэкграунд дополнял дизайн и создавал единую концепцию?
  • какой фон выбрать с точки зрения юзабилити?

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

Основные принципы при выборе фона для сайта

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

Принцип 1. Специфика ресурса

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

Принцип 2. Важность контентной части

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

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

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

Принцип 3. Контраст

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

Принцип 4. Соответствие фирменному стилю

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

На примере фон сайта — текстура, которая используется в оформлении упаковки товара и, таким образом, дополняет фирменный стиль:

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

Мастер Йода рекомендует:  Как управлять развертыванием Windows-приложений

Принцип 5. Качество и адаптивность

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

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

Принцип 6. Баланс между оригинальностью и юзабилити

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

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

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

Здравствуйте, дорогие друзья!

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

Навигация по статье:

Как в html сделать фон в виде цвета или картинки?

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

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

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

Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.

Для того чтобы в HTML сделать фон в виде цвета нужно к тегу для которого нам нужно задать фон дописать атрибут bgcolor

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

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

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

    1. В HTML коде присвоить элементу, для которого мы хотим задать цвет определённый класс или использовать атрибут style. Мне больше нравится вариант с классом, поэтому в первую очередь покажу его.

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

Как сделать фон в виде цвета в CSS?

Для задания цвета фона мы можем использовать несколько форматов:

    1. Кодовое название цвета

Уровень прозрачности задаётся в виде десятичного значения от 0 до 1, где 0 – полностью прозрачный, а 1 – не прозрачный.

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

Как сделать фон в виде картинки в CSS?

Для этого нам нужно будет:

  1. 1. К себе на сайт в определённую папку с картинками загрузить изображение, которое мы хотим использовать в качестве фона.
  2. 2. Задать его в CSS

В скобочках указываем путь к картинке.

Так же если изображение у вас небольшое то будьте готовы увидеть такую картину:

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

Так же можно сделать чтобы он повторялся только по горизонтали:

Или только по вертикали:

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

  • top – для выравнивание по верхнему краю
  • bottom — для выравнивания по нижнему краю
  • left – выравниваем по левому краю
  • right – по правому
  • center – выравниваем по центру (можно использовать как для выравнивания по горизонтали так по вертикали)

Так же можно сочетать эти выравнивания.

Как растянуть фоновое изображение под размер элемента?

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

  • background-size: 100% auto; — растянет изображение по горизонтали, а по вертикали размер будет увеличиваться пропорционально чтобы не искажалось изображение.
  • background-size: auto 100%; — растягивает по высоте, а по ширине размер пропорционально масштабируется.
  • background-size: 100% 100%; — растянет картинку по горизонтали и вертикали, при этом изображение может деформироваться.
  • background-size: contain; — изображение будет масштабироваться под размер блока насколько это возможно без искажения.
  • background-size: cover; — картинка масштабируется чтобы хотя бы одна из сторон была по размеру элемента и не искажалась.

Как изменить расположение фона внутри элемента?

Кроме описанных выше значений top, bottom, left, right и center мы так же можем использовать значения в пикселях, процентах и em чтобы выставить фоновую картинку так как нам нужно.

Воспользуемся свойством background-position:

Как сделать фон в онлайн сервисах и как его поменять на сайтах HTML и PHP

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать фоновый рисунок на сайте

Сохраните изменения в блокноте, нажмите кнопку «Обновить» в браузере. На экране появится фоновый рисунок. Если размеры изображения меньше параметров web-страницы, то картинка будет дублироваться столько раз, сколько необходимо для заполнения всего пространства. Исправить этот недостаток можно двумя способами:
• с помощью программы Adobe Photoshop установите требуемые параметры картинки в пикселах («Изображение» — «Размер изображения»);
• задайте нужные размеры в html-коде.
Например, если требуется ширина 1250 px, а высота – 650 px, то нужно дописать необходимые атрибуты для ячейки таблицы, в которую будет помещена картинка.

Нельзя задать размер в теге — изображение всегда будет отображаться в натуральную величину.

Аналог ccs для вставки фонового изображения:

Узнайте как сделать фон страницы в html документе и создавайте свои статьи наглядно читаемыми и структурированными

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

Чтоб такой беды не случилось с вашим проектом я решил написать статью на тему: «Как сделать фон страницы в html». Прочитав публикацию, вы узнаете, с помощью каких инструментов можно задавать фоновое оформление, как сделать фон фиксированным или меняющимся и многое другое, что поможет сделать привлекательным ваш сайт. А теперь начнем!

Основные инструменты для задания фона веб-страниц

Для установки фонового изображения разработчиками веб-языков был предусмотрен атрибут background. Он имеется как в html, так и в css.

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

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

Фон для сайта

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

Введение

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

Если мы говорим о фоне для сайта, то здесь следует выделить две его составляющие: фон web-страницы и фон её содержания. Основная задача фона web-страницы заключается в том, чтобы убрать неизбежные пустоты на задний план и сфокусировать внимание пользователя на содержании сайта.

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

Что собой представляет фон? Обычно в качестве фона для сайта выступают цвет или картинка. Задание цвета является простейшим и наименее ресурсоёмким вариантом.

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

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

В качестве компромиссного варианта можно использовать, так называемые, паттерны. Что такое паттерн? Паттерн (англ. pattern – образец, шаблон, система) – это хорошо сформулированное и эффективное в определенном контексте типовое решение проблемы. В нашем случае, паттерном является повторяющаяся бесшовная фоновая картинка для сайта, когда один её край совместим с противоположным.

Бесшовный фон для сайта

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

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

Скачать бесплатные фоны для сайта

Должен признать, что создание бесшовного фона для сайта это всё-таки дело не простое. Многие занимаются этим на профессиональной основе и стоят такие вещи не дёшево. Тем не менее, я решил собрать подборку фонов для сайта, доступных в сети Интернет бесплатно. В общей сумме их набралось 100 штук. Весит архив 6.61 Мб.

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

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

Что такое сайт? Сайт (от англ. site) – это набор файлов, выложенных на сервер и доступных в сети Интернет. Основу таких файлов составляют web-страницы в формате HTML. Если данная тема вам интересна, рекомендую почитать мои статьи:

Безусловно, быть «чайником» не слишком комильфо, но с чего-то же надо начинать. Да и знания, как и опыт, дело наживное, надо просто захотеть и у вас всё получится. Мы же вернёмся к фону для сайта.

Сам ХТМЛ-документ состоит из двух основных частей HEAD (метаданные) и BODY (тело документа) . Очевидно, что фон сайта задается именно для второй его части. Это можно сделать через соответствующие атрибуты тега BODY , но лучше и удобней использовать CSS. Ниже я постараюсь разобрать оба варианта.

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

Как уже было сказано, работать мы будем с тегом BODY , и здесь нас интересует два атрибута: bgcolor и background . В качестве примера приведу следующий вариант:

Как самостоятельно сделать фон на своем сайте. Html и Css в помощь

Здравствуй, мой читатель!

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

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

Поменять дизайн можно с помощью html либо CSS. Кто не знает, это базовые языки разметки и стилей, с их помощью разрабатываются веб-страницы сайтов.

HTML (HyperText Markup Language) в дословном переводе означает “язык разметки гипертекста”, все его команды интерпретируются браузерами и отображаются на экране в удобной для пользователя форме.

CSS (Cascading Style Sheets — каскадные таблицы стилей) представляет собой формальный язык, которым описывается внешнее оформление документа, написанного с использованием языка разметки. В основном он используется для описания и оформления внешнего вида интернет-страниц, которые были написаны с помощью языка HTML.

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

Фон в html

В качестве фона в html могут применяться следующие элементы:

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

Теперь о каждом из этих элементов поговорим подробнее.

Для установки цвета заднего фона нужно использовать свойство под названием background-color тега style.

В Нtml цвет можно задавать:

  1. В виде 3-х пар 16-тиричных цифр, каждая из которых отвечает за свой цветовой компонент (красный, зелёный, синий). Чтобы было понятнее, вспомните детство: это как смешивание цветов акварельных красок, например, синий + желтый = зеленый, и в зависимости от количества каждого получается новый оттенок. Так вот 16-тиричные цифры и определяют количество каждого цвета.
  2. Ключевыми словами (green, yellow и т.д.). В этом случае рекомендую использовать только основные цвета, так как название оттенков браузер может не распознать.
  3. В виде rgb (*,*,*), где снежинка — это число от 0 до 255. Также как и в первом случае задается количество определенного цвета (red, green, blue) для получения нужного результата.
  4. В последнее время стал возможен и вариант rgba (*,*,*,*), где первые цифры, как и в предыдущем случае, — это количество того или иного цвета, а последняя — уровень непрозрачности, который определяется числом от 0 до 1.

Чтобы получился прозрачный фон, надо задать свойству background-color значение transparent.

Фоновая картинка

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

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

Как же это сделать, если рисунок не резиновый? А очень просто! Запретите клонирование с помощью background-repeat. Допустимые значения для этого свойства:

  1. запрет повторений — no-repeat;
  2. по обеим осям – repeat;
  3. по вертикали — repeat-y;
  4. повторение фоновой картинки по горизонтали — repeat-x.

Как вы догадались, вам важен первый вариант.

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

В некоторых случаях во время прокрутки страницы требуется фиксированное положение изображения. Фиксированный фон веб-ресурса поможет создать свойство background-attachment. Он принимает значения fixed или scroll. Для фиксации рисунка используйте первое значение.

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

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

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

Средства CSS

Выше описанные свойства вполне подходят и для стилевых каскадных таблиц (CSS). Для создания дизайна веб-ресурса с помощью CSS достаточно использовать команды тех примеров, что я приводил выше. Результат будет тот же.

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

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

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

Теперь вы знаете, как следует менять фон. Создайте свой «ковёр», расстелите его на своём сайте, наслаждайтесь его красотой и радуйте посетителей! Расскажите в социальных сетях знакомым и друзьям о том, чему вы научились благодаря этой статье. Подписывайтесь на обновления, следите за новыми редакциями, до скорых встреч!

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