Как сделать красивый бэкграунд
Фон для сайта (свойство CSS background)
Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.
Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:
Background-color
Задает цвет фона. Можно применять к отдельным элементам
или ко всему сайту через через тэг :
/* черный фон сайта */ body < background-color: #000; >/* черный фон заголовка, белый цвет шрифта */ h1
Background-image
Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:
Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать полный путь к изображению. Опция пригодится если вы захотите, например, добавить кликабельный фон на сайте.
Background-size
Определяет размер фонового изображения.
Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.
Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.
Background-repeat
Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:
background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:
Background-position
Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
background: #000 url(«my-image.jpg») no-repeat fixed left bottom;
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!
2.10. CSS-фон
Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.
Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.
Свойства фона html-элементов
1. Базовый цвет: свойство background-color
Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.
Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.
Свойство не наследуется.
Рис. 1. Свойство background-color для разных элементов
2. Источник изображения: свойство background-image
Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.
Свойство не наследуется.
3. Укладка изображений: свойство background-repeat
Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.
Свойство не наследуется.
Рис. 2. Свойство background-repeat
4. Фиксация изображения: свойство background-attachment
Свойство background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.
Свойство не наследуется.
| background-attachment | |
|---|---|
| Значения: | |
| scroll | Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию. |
| fixed | Предотвращает перемещение, фиксирует фоновое изображение на заднем плане. |
| local | Фоновое изображение прокручивается вместе с содержимым элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
5. Позиционирование изображений: свойство background-position
Если для элемента заданы фоновые изображения, свойство background-position указывает их начальное положение (после любого изменения размера) в соответствующей области расположения фона.
Свойство не наследуется.
Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.
Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.
Рис. 3. Свойство background-position
Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:
Рис. 4. Фоновое изображение по низу блока
Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:
Рис. 5. Задание для блока нескольких фоновых изображений
6. Область рисования: свойство background-clip
Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.
Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.
Свойство не наследуется.
| background-clip | |
|---|---|
| Значения: | |
| border-box | Фон закрашивает область в пределах рамки элемента. Значение по умолчанию. |
| padding-box | Фон закрашивает область в пределах внутренних полей элемента. |
| content-box | Фон закрашивает только область содержимого. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 6. Свойство background-clip
7. Область расположения фона: свойство background-origin
Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).
Свойство не наследуется.
| background-origin | |
|---|---|
| Значения: | |
| padding-box | Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию. |
| border-box | Фон позиционируется относительно верхних границ рамки элемента. |
| content-box | Фон позиционируется относительно верхних границ области содержимого элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 7. Свойство background-origin
8. Размер изображений: свойство background-size
Свойство background-size устанавливает размер фоновых изображений.
Свойство не наследуется.
Рис. 8. Свойство background-size
9. Краткая запись свойств фона: свойство background
10. Множественные фоны
Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.
Рис. 9. Пример использования нескольких фоновых изображений
6 бесплатных сервисов для создания фонов и обоев
Эта статья пригодится всем читателям, которым хоть раз приходилось подбирать спокойный, неброский фон для сайта, презентации или просто для рабочего стола. В ней вы познакомитесь с шестью онлайновыми генераторами необычных паттернов.
Паттерн является идеальным решением во всех случаях, когда необходимо чем-то заполнить пространство, но в то же время не отвлекать внимание от основного контента. Поэтому они часто используются в качестве фона веб-страниц, презентаций или даже рабочего стола. И хотя выглядят эти геометрические узоры довольно просто, подбор подходящего именно для вашего проекта иногда отнимает продолжительное время. В этом случае лучше просто создать паттерн своими руками, и из этой статьи вы узнаете, каким образом это можно сделать.
Patternify
Patternify позволяет создавать шаблоны путём попиксельного раскрашивания поля размером 10 × 10. Вы можете выбирать разные цвета и прозрачность элементов, так что при всей кажущейся примитивности этого инструмента есть возможность создавать довольно интересные рисунки. Результат можно сохранить в виде картинки в формате PNG или скопировать код CSS.
Tartanmaker
Оказывается, всеми любимая шотландская клетка (тартан) подчиняется строгим законам создания и насчитывает более 3 300 вариантов рисунка. Далее в мировой регистр тартанов их просто перестали заносить, ведь появился онлайн-сервис Tartanmaker, с помощью которого вы сможете создать бесчисленное число вариаций шотландской клетки.
Gerstnerizer
Очень странный генератор паттернов, который позволит вам создать совершенно невероятные геометрические вариации. Для настройки вида рисунка служит левая панель с ползунками различных инструментов. Здесь же, чуть ниже, расположено поле, на котором вы можете мышкой задать линии вашего паттерна. А в самом низу этой панели вы найдёте кнопки очистки и загрузки случайного пресета. Инструмент необычный, но не совсем понятно, как сохранить результаты своих забав.
Colour Lovers Seamless
На этом сайте вы найдёте сразу два инструмента для создания паттернов. Первый из них позволяет просто раскрасить в разные цвета уже имеющиеся шаблоны. Второй предоставляет в ваше распоряжение более сложный редактор, с помощью которого вы из имеющихся объектов различных форм или в режиме свободного рисования комбинируете нужный вам узор. Результат можно сохранить в галерее ресурса (после регистрации) или загрузить на свой компьютер.
Patternizer
Patternizer предлагает нам самовыражаться только одним-единственным способом — с помощью наложения друг на друга цветных полос различного размера. Однако даже эта простая операция в состоянии создать бесчисленное количество оригинальных геометрических узоров. Так что тут всё зависит только от вашей фантазии.
GeoPattern
GeoPattern поможет создать уникальный, неповторимый рисунок, просто набирая любой текст на клавиатуре. Никаких элементов управления или настроек не предусмотрено, но результат получается просто замечательный. Язык ввода значения не имеет.
Как сделать красивый бэкграунд
Фон для сайта – довольно важный элемент любого дизайна. Особенно это замечают те люди, у которых большое разрешение монитора, ведь если в среднем ширина любого блога порядка 1000 пикселей, то при разрешении экрана 1920×1080 – 920 пикселей будет занимать задний фон сайта – по 460 пикселей с одной и с другой стороны, довольно большое пространство, и над ним стоит поработать! 
Задний фон сайта с одной стороны должен быть красивый, но в тоже время он не должен отвлекать посетителей от основного контента. Можно кратко сформулировать его назначение:
В этой статье мы рассмотрим три вида фоновых вариаций, которые Вы можете применить на своем блоге, пошагово повторив все действия за мной.
Итак, три вида фона сайта:
Для того чтобы поставить или поменять фон на сайте нам потребуется отредактировать файл стилей style.css. Применять различные виды фона я буду на сайте http://kakje.ru/ на котором установлен WordPress и пошагово описывать свои действия.
Прежде всего нам нужно найти этот файл. Для этого заходим в админку, наводим на вкладку “Внешний вид” и нажимаем “Редактор”:
На этом подготовительная работа закончена. Пора приступать к делу!
Как изменить фоновый цвет сайта.
Изначально сайт выглядит вот так:
Теперь давайте попробуем изменить фоновый цвет. Для этого дописываем с стилях body вот эту строчку с кодом цвета:
Дополнительная картинка, чтобы не возникло трудностей:
И теперь наш сайт выглядит вот так:
Цвет фона может быть абсолютно любым, для этого просто узнайте нужный код цвета и замените его.
Картинка для фона сайта – бесшовный фон.
Пример бесшовного фона сайта Вы можете посмотреть на этом блоге. Для фона используется вот такая картинка, которая повторяется по осям X и Y:
Принцип картинки для такого фона: если к ней вплотную подставить справа и снизу такую же, то будет осуществлен плавный переход (без шва):
Найдите подобную картинку в интернете – их очень много, либо нарисуйте ее сами используя этот принцип.
Чтобы использовать картинку в качестве фона первое что нужно сделать – это закачать ее на свой хостинг – обязательно! и узнать путь до нее, а затем прописать в стилях body эту строчку (со своим путем до картинки!):
Дополнительное пояснение:
И теперь наш сайт выглядит вот так:
Красивый фон для сайта – большая картинка + фоновый цвет.
В этом случае мы используем в качестве фона (background) одну большую картинку, которая не повторяется и находится всегда сверху и по центру на сайте + подходящий фоновый цвет. Немного порыскав по интернету я нашел отличную картинку, которая бы идеально подошла для фона кулинарного блога, вот ее уменьшенная копия:
Обратите внимание на то, что данная картинка плавно перетекает слева, справа и снизу в однотонный цвет. Через фотошоп я посмотрел, что код этого цвета: #e7daae – его то и будем применять как основной в том месте, где заканчивается картинка.
После нескольких вариаций я получил вот такой фон:
Для такого отображения я дописал в файл style.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 — большинство ваших посетителей будут видеть его именно так.