Css — Не ставится background-image на странице


Содержание

CSS Multiple Backgrounds

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

Вы также узнаете о следующих свойствах:

  • background-size
  • background-origin
  • background-clip

CSS несколько фонов

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

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

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

Пример

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

В следующем примере используется сокращенное свойство background (тот же результат, что и в примере выше):

Пример

Размер фона CSS

Свойство CSS background-size позволяет задать размер фоновых изображений.

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

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

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Двумя другими возможными значениями для background-size являются contain и cover .

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

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

В следующем примере демонстрируется использование contain и cover :

Пример

Определение размеров нескольких фоновых изображений

Свойство background-size также принимает несколько значений для размера фона (с помощью списка с разделителями-запятыми) при работе с несколькими фоновыми рисунками.

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

Пример

Полный размер фоновое изображение

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

  • Заполните всю страницу изображением (без пробелов)
  • Масштабирование изображения по мере необходимости
  • Центрировать изображение на странице
  • Не вызывать полосы прокрутки

В следующем примере показано, как это сделать; Используйте элемент HTML (HTML-элемент всегда по крайней мере высота окна браузера). Затем установите фиксированный и центрированный фон на нем. Затем настройте его размер с помощью свойства «размер фона»:

Пример

CSS фон-происхождение свойства

Свойство CSS background-origin указывает, где расположено фоновое изображение.

Свойство принимает три различных значения:

  • border-box — фоновое изображение начинается с верхнего левого угла границы
  • padding-box — (по умолчанию) фоновое изображение начинается с верхнего левого угла края отступа
  • content-box — фоновое изображение начинается с верхнего левого угла содержимого

В следующем примере демонстрируется свойство background-origin :

Пример

CSS фон-клип свойство

The CSS background-clip свойство определяет область рисования фона.

Свойство принимает три различных значения:

  • border-box — (по умолчанию) фон окрашен в внешнюю кромку границы
  • padding-box — фон окрашен на внешнюю кромку заполнения
  • content-box — фон окрашен в поле содержимого

В следующем пример демонстрируется свойство background-clip :

Фон в CSS – памятка для начинающих

При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

Работа с фоном в CSS

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

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам

, так и ко всему веб-сайту с помощью тега .

background-image

Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

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

background-repeat

Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

Оно может иметь несколько значений:

  • background-repeat: repeat-x — повторение по горизонтали;
  • background-repeat: repeat-y — повторение по вертикали;
  • background-repeat: repeat — повторение и по горизонтали и по вертикали;
  • background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

  • background-attachment: scroll — фон прокручивается вместе со страницей;
  • background-attachment: fixed — фон остаётся неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .

  • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
  • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

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

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

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

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

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

Относительное изменение размера

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

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

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

Масштабирование до максимального размера

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

Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

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

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

Масштабирование сразу нескольких фонов

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

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

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

Пример создания полупрозрачного блока:

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

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Цукерберг рекомендует:  Обучение - Нужна помощь с Monodevelop

Пример задания прозрачного фона:

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

Изображение фона на весь экран с помощью CSS

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

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

Свойство background-size

С помощью background-size можно масштабировать изображение по заданным размерам. Согласно документации этого свойства (ссылка на htmlbook) оно может принимать значения cover и contain .

  • cover — Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
  • contain — Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

Всё, что нам нужно установить фоновое изображения для HTML:

Готово! Теперь изображение отображается на весь экран, даже при изменении размера окна браузера. Работает так же в IE9+.

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

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

Картинка в качестве фона страницы — HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:

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

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

Картинка в качестве фона страницы — CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:

Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо «сшиваться» по краям.

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

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

CSS: Фон

CSS свойства background используются для создания эффектов на заднем фоне страницы.

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


  • background-color
  • background-image
  • background-repeat
  • background-position

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента

Свойство background-color просто добавляет цвет фона на страницу или к определенному элементу. Мы использовали в примере background-color, чтобы установить фоновый цвет для элемента и внутри элемента

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

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

Повтор фонового изображения

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

  • no-repeat — фоновое изображение не повторяется
  • repeat-x — повторяет фоновое изображение только по горизонтали
  • repeat-y — повторяет фоновое изображение по вертикали
  • repeat — фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)

Попробовать »

Позиционирование фонового изображения

По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение — положение по горизонтали, второе — по вертикали.

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

Попробовать »

Если будет указано только одно значение, то по умолчанию вторым значением будет center:

это то же самое что и:

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

Фиксация фонового изображения

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

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

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

Несколько фоновых изображений

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

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

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

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

Работа с картинками (изображениями) в CSS

2013-03-01 / Вр:23:32 / просмотров: 103404

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

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

background | background-image

Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body. Задайте путь к изображению внутри значения url.

Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

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

Повтор фоновой картинки.

background-repeat

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

background-repeat: repeat-y | repeat-x | no-repeat;

repeat-y — повтор фонового изображения по оси — у (вертикаль);
repeat-x — повтор фонового изображения по оси — х ( горизонталь);
no-repeat; — запретить повтор фонового изображения (изображение будет как оно есть);

Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

Как добавить две фоновые картинки на веб-страницу.

background

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

Картинка по центру.

Существуют несколько методов установить картинку по центру.

Как в css изменить размер картинки.

background-size

Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

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

а можно вот так:

Обтекание (выравнивание) картинки текстом.

float

Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки , вот только в CSS по какой стороне будет выравнивание элементов определяет float.

float: left | right | none ;

left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

right — выровнять картинку по правому краю, текст обтекает по левой стороне.

none — выравнивание и обтекание не задается (значение по умолчанию).

Здесь я указал отступы текста от картинки

Тень картинки.

box-shadow

Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

1. — inset — тень внутри элемента, без inset тень будет наружу;
2. — сдвиг тени по горизонтали (6px — вправо, -6px — влево);
3. — сдвиг по вертикали (6px — вниз, -6px — вверх);
4. — размытие тени (0 — четкая тень);
5. — растяжение тени (3px — растяжение, -3px — сжатие);
6. — цвет тени

Цукерберг рекомендует:  Мега меню с выскальзывающими панелями на CSS3

box-shadow: 0 0 5px; — тень вокруг элемента

box-shadow: inset 0 0 5px; — тень внутри

Прозрачность картинки.

Начну сразу с примера.

Обратите внимание в коде на opacity:0.4 . Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

С наилучшими пожеланиями Webmasterok2009

Как сделать картинку фоном в HTML и CSS. 3 простых способа

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

  • Покрывается 100% ширины и высоты страницы
  • Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
  • Сохраняются пропорции картинки (aspect ratio)
  • Изображение центрировано на странице
  • Фон не вызывает скроллов
  • Решение максимально кроссбраузерное
  • Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

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

Этот способ работает в:

  • Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
  • IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в

Этот способ работает в хороших браузерах и IE 8+.

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

CSS Multiple Backgrounds

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

Вы также узнаете о следующих свойствах:

  • background-size
  • background-origin
  • background-clip

CSS несколько фонов

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

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

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

Пример

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

В следующем примере используется сокращенное свойство background (тот же результат, что и в примере выше):

Пример

Размер фона CSS

Свойство CSS background-size позволяет задать размер фоновых изображений.

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

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

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Двумя другими возможными значениями для background-size являются contain и cover .

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

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

В следующем примере демонстрируется использование contain и cover :

Пример

Определение размеров нескольких фоновых изображений

Свойство background-size также принимает несколько значений для размера фона (с помощью списка с разделителями-запятыми) при работе с несколькими фоновыми рисунками.

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

Пример

Полный размер фоновое изображение

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

  • Заполните всю страницу изображением (без пробелов)
  • Масштабирование изображения по мере необходимости
  • Центрировать изображение на странице
  • Не вызывать полосы прокрутки

В следующем примере показано, как это сделать; Используйте элемент HTML (HTML-элемент всегда по крайней мере высота окна браузера). Затем установите фиксированный и центрированный фон на нем. Затем настройте его размер с помощью свойства «размер фона»:

Пример

CSS фон-происхождение свойства


Свойство CSS background-origin указывает, где расположено фоновое изображение.

Свойство принимает три различных значения:

  • border-box — фоновое изображение начинается с верхнего левого угла границы
  • padding-box — (по умолчанию) фоновое изображение начинается с верхнего левого угла края отступа
  • content-box — фоновое изображение начинается с верхнего левого угла содержимого

В следующем примере демонстрируется свойство background-origin :

Пример

CSS фон-клип свойство

The CSS background-clip свойство определяет область рисования фона.

Свойство принимает три различных значения:

  • border-box — (по умолчанию) фон окрашен в внешнюю кромку границы
  • padding-box — фон окрашен на внешнюю кромку заполнения
  • content-box — фон окрашен в поле содержимого

В следующем пример демонстрируется свойство background-clip :

CSS фоны: часто задаваемые вопросы

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

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

Что такое СSS фоны?

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

Фон элемента описывается согласно блочной модели СSS. Поля ( margin ) не являются частью фона, но частью фона являются границы ( border ), подложки (или отступы) ( padding ) и ширина контента ( width ).

Существую 5 фоновых свойств, применимых к CSS селектору, 4 из которых применяются к фоновым изображениям:

Фоновый цвет ( background-color ) — – устанавливает фоновый цвет элемента. Цвету может быть задано значение hex, rgb или одно из ограниченных цветовых имен. Также фоновый цвет может быть задан прозрачным или унаследовать значение родительского элемента. Более подробно в статье CSS цвета в веб-дизайне Фоновое изображение ( background-image ) — – устанавливает изображение как фон к элементу, а его значение выглядит как url(«путь-к-изображению»). Свойство background-image может также иметь значения none и inherit . Повтор фона ( background-repeat ) — – устанавливает повторение фонового изображения. Значения: repeat , no-repeat , repeat-x , repeat-y и inherit . Фоновое приложение ( background-attachment ) – — устанавливает, как фоновое приложение будет двигаться со страницей. Оно может скроллировать ( scroll , при скроллировании страницы движется с элементом, значение по умолчанию), остается фиксированным ( fixed , остается фиксированным в случае, когда страница скроллируется) или перенимать ( inherit ) значение родительского элемента. Позиция фона ( background-position ) — – устанавливает стартовую позицию фонового изображения в элементе. У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Позицию фона можно также установить в % от верхнего левого угла элемента.

Сокращение правил СSS относящихся к фону

Можно задавать каждое свойство фона индивидуально, однако на практике это лучше упростить. При этом свойства следует задавать в следующем порядке: цвет, изображение, повтор, приложение, позиция (color, image, repeat, attachment, position).

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

  • background-color: transparent
  • background-image: none
  • background-repeat: repeat
  • background-attachment: scroll
  • background-position: 0% 0%

Пример сокращеной записи показан ниже:

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

Фоновые изображения CSS не являются HTML изображениями

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

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

Так как изображение в html – это новый блок (встроенный блок, то есть он обтекается другими элементами), у него есть ширина и высота, подложки и поля, а также граница. Более того, к тегу img можно применить фоновое изображение CSS. Не знаю, как часто это применяется на практике, но по желанию за изображение можно добавить фоновое изображение.

Ответы на распространенные вопросы

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

1. Почему фоновое изображение не отображается?

Обычно это связанно с тем, что элемент не имеет ни ширины, ни высоты. Помните, что фоновое изображение не создает блока, а наполняет существующий. Если этот блок не имеет ни ширины, ни высоты, наполнить попросту нечего. Решением будет придание элементу размеров. Можно задать элементу (не фоновому изображению) высоту и ширину, или же наполнить элемент контентом, где ширина и высота создадутся сами.

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

2. Могу ли я использовать несколько фоновых изображений?

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

Цукерберг рекомендует:  Справляемся с прокрастинацией советы от Дорофеева.

Не следует также забывать, что ко всем HTML-элементам можно применить фон. Скажем, у вас есть div , содержащий h2 и параграф. К каждому из них можно применить фоновые изображения и, контролируя другие СSS cвойства, . можно добиться нужного. эффекта. Можно так же вставить дополнительные div и span внутри и снаружи элемента, что создаст больше элементов, к которым можно добавить фон. Такой подход довольно громоздок, но он работает.

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

Существует два способа. Нужно добавить новое правило к элементу с псевдоклассом :hover , чтобы оно указывало ( background-image ) на новое изображение, либо сделать изображение в виде CSS спрайта и менять его фоновую позицию ( background-position ), для показа другой части спрайта.

Важно отметить, что старые версии IE не поддерживает псевдокласс :hover естественным путем, поэтому для работы этих способов в IE понадобиться небольшой javascript. Я предпочитаю пользоваться suckerfish solution, этим же решением я пользуюсь для выпадающих вниз меню.

4. Как сделать фоновые изображения прозрачными?

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

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

5. Можно ли расположить фоновое изображения в таблице, строке таблицы или ячейки таблицы?

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

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

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

6. Можно ли добавить фоновое изображение границам?

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

7. Можно ли добавить фоновые изображения спискам?

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

8. Как добавить отступ фоновому изображению?

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

9. Как выравнить фоновое изображение по правому краю.

Подобно предыдущим вопросам ответ связан с фоновой позицией ( background-position ). Воспользуйтесь значением right для свойства background-position ( background-position:right; ) и изображение будет выровнено по правому краю элемента.

10. Почему в напечатанном виде фоновое изображение не отображается?

Контроль над этим свойством отсутствует по весомой причине. Чтобы напечатать изображение, потребуется много чернил, поэтому многие предпочитают не печатать его. Печатать или не печатать изображение устанавливается в браузере индивидуально. Я рекомендую оставить все как есть, однако если решите печатать, то вот способ для обхода запрета на печать фоновых изображений justaddwater.dk/2009/09/29/print-css-background-logo-hack/.

11. Как растянуть фоновое изображение, чтобы оно соответствовало элементу?

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

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

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

12. Можно ли обернуть ссылку вокруг фонового изображения?

Нет. Еще раз, фоновые изображения не создают блоки. Решением будет добавление ссылки вокруг всего контента внутри html-элемента или охватывание (обертывание) ссылки вокруг самого элемента. Выбор варианта зависит html-элемента и контента внутри этого элемента.

Заключение

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

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

Свойство CSS background

Свойство CSS background задает фон на html сайте. Также с помощью него можно задавать фоны как отдельным элементам сайта (например, какой-то области, шапке сайта, колонки и т.п.), так и всему сайту целиком. Это свойство имеет множество атрибутом и нюансов. Разберем все на примерах и научимся делать как монотонные фоны, так и фоновые картинки на сайте.

1. Синтаксис CSS background

  • background-attachment — задает точку привязывания отчета
  • background-color — монотонный цвет фона (можно задавать в формате #RGB, названием цвета и в формате rgb());
  • background-image — задание фоновой картинки;
  • background-position — позиция элемента (сдвиг относительно левого верхнего края);
  • background-repeat — задание повторения элемента (можно задавать повтор по осям, а также указать бесконечное количество повторов);

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

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

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

Лично я всегда выбираю такие шаблоны для сайта, чтобы ширина видимой части контента была не больше 1024 символов. Если посмотреть статистику сайта, то такое разрешение удовлетворяет большой процент пользователей. В будущем это число будет уменьшаться, т.к. новые мониторы с высоким разрешением вытесняют старые (например, full-hd есть почти у каждого).

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

Рассмотрим все варианты по заданию фона на сайте.

3. CSS background-color — монотонный фон на сайте

Свойство CSS background-color — задает цвет фона. Например:

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

Еще пример. Зададим тегу

Всю палитру цветов в кодах на html Вы сможете найти тут.

Аналогичное свойство есть у html-таблиц, но называется оно bgcolor

4. CSS background-image — фоновая картинка на сайте

Свойство CSS background-image — позволяет установить фоновое изображение на сайте.

Синтаксис CSS background-image

Например, для установки общего (глобального) фона:

Например фоновая картинка:

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

В CSS3 можно задать несколько фоновых изображений (они как бы накладываются друг на друга как слои).

Задавая фон в виде картинки есть возможность настраивать так же ряд важных свойств CSS

  • background-repeat
  • background-attachment
  • background-position
  • background-size
  • background-clip

Рассмотрим в отдельности эти параметры

4.1. CSS background-repeat

Свойство CSS background-repeat определяет повторять ли фон. Можно отдельно настраивать повторение по вертикали и горизонтали.

Синтаксис CSS background-repeat

Где value может принимать следующие значения:

  • repeat-x — повторять фоновое изображение по горизонтали;
  • repeat-y — повторять фоновое изображение по вертикали;
  • no-repeat — не повторять фоновое изображение;
  • repeat (по умолчанию) — повторять фоновое изображение по горизонтали и вертикали;
  • space — все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются;
  • round — аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения;

Например, по горизонтали не повторять, по вертикали повторять фоновое изображение:

4.2. CSS background-attachment

Свойство CSS background-attachment задает привязки фона изображения. Можно зафиксировать задний фон, чтобы при прокрутке скроллом он не крутится или же наоборот фон будет прокручиваться вместе с сайтом.

Синтаксис CSS background-attachment

Где value может принимать следующие значения:

  • scroll (действует по умолчанию) — фон прокручивается вместе с сайтом;
  • fixed — при прокрутке скролла фон остается неизменными;
  • local — изображение прокручивается с контентом, но не с элементом, его содержащим;

Я думаю, что Вы видели такие сайты и понимаете о чем идет речь.

4.3. CSS background-position

Свойство CSS background-position задает расположение фона относительно левого верхнего угла.

Синтаксис CSS background-position

В параметрах мы указываем выравнивание (смещение) в пикселях или процентах сначала по оси Х, потом по оси У. value , value2 может принимать следующие значения:

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

По умолчанию фон располагается в верхнем левом углу.

Можно указывать в пикселях Npx задание отступа от разных краев. Проще понять это на примере:

Фон будет выравнивать по правому краю со смещением 50 пикселей вниз.

Или например сместим фон на 100px вправо и расположим его по центру относительно высоты.

Все эти параметры можно задать в таблице стилей CSS. Этот параметр выравнивает расположение фона на странице.

4.4. CSS background-size

Свойство CSS background-size позволяет задавать размеры фона.

Синтаксис CSS background-size

Где первый параметр задает значение по оси Х, второй параметр по оси У. Можно задавать как в процентах, так и пикселях.

Так же может принимать два статичных параметра

  • contain — масштабирует изображение по длинной стороне (заполняет все пространство)
  • cover — масштабирует изображение по короткой стороне (заполняет все пространство)

Напоследок запишем все атрибуты вместе:

Для обращения к float из JavaScript нужно писать следующую конструкцию:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих