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

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

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

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

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

<div ></div> // HTML разметка

.bg_example width: 400px;
height: 300px;
>

Это важно! Я не буду перечислять все возможные варианты записи CSS правил, а используемые верстальщиками в рабочих проектах (сокращенная запись).

Цвет фона в СSS

Цвет фона задается в виде шестнадцатеричного кода.

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

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

В веб-дизайне существует три подхода с картинками:

размноженная маленькая текстурная картинка

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

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

картинка фоном без повтора

background: url(icon.png) no-repeat;

no-repeat – без повтора

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

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

растянутая картинка на всю секцию или экран

Чтобы растянуть картинку на всю секцию с сохранением пропорций, применяют значение cover. Только нужно понимать, что размер оригинального изображения по ширине, не должен быть меньше размера самого большого монитора , 1920 пикселей. Иначе растягивание картинки приведет к потери её качества.

background: url(bg_full.jpg) no-repeat cover;

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

Полупрозрачный фон на CSS

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

background: rgba(0, 0, 0, 0.5);

Градиент фона в CSS

Элементы с фоновыми градиентами смотрятся симпатичнее, чем одноцветные. Мы создали линейный градиент с переходом от светло-розового цвета к розовому цвету и от правого верхнего угла к нижнему левому.

background: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);

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

Размытый фон

Эффект размытого фона хорошо виден на фотографии. Для наглядности размоем не весь фон, а какую-нибудь область на нем. Размывать будем CSS фильтром blur и SVG фильтром feGaussianBlur, для лучшей кроссбраузерности. Однако для IE эта комбинация все равно не работает.

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

<svg version=»1.1″ xmlns=»http://www.w3.org/2000/svg»>
<filter >
<feGaussianBlur stdDeviation=»6″></feGaussianBlur>
</filter>
</svg>

bg-image background: url('kabachok.jpg') no-repeat fixed center / cover;
position: relative;
>br
.block position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: inherit;
filter: blur(10px);
filter: url(#blur);
>

Заключение

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Как с помощью CSS сделать фон на всю страницу?

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

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

Пример №1. Использование одного изображения.

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

CSS код здесь очень простой. Определяем фоновое изображение, а также его расположение на странице.

Пример №2. Использование двух изображений.

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

Для тега <div>, используем изображение в формате gif по цвету, сходное с цветом фона <body>.

Пример №3. Фон неба.

В этом примере мы используем полоску шириной 1 пиксель с градиентной заливкой, которая повторяется горизонтально для тега <body>. А для тега <div> в качестве фона стоит картинка с облаками.

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

Здесь вы можете посмотреть примеры их реализации.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignerwall.com
Перевел: Сергей Патин
Урок создан: 26 Февраля 2009
Просмотров: 117242
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

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

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

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

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

Градиент по горизонтали

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

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

2. Градиент по вертикали

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

3. Обычное изображение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать фон в виде цвета в 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 чтобы выставить фоновую картинку так как нам нужно.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *