Как сделать картинку фоном в css: background-image | htmlbook.ru

Css картинка на задний план • Вэб-шпаргалка для интернет предпринимателей!

Содержание

• 1 Свойства фона html-элементов
  • 1.1 1. Базовый цвет: свойство background-color
  • 1.2 2. Источник изображения: свойство background-image
  • 1.3 3. Укладка изображений: свойство background-repeat
  • 1.4 4. Фиксация изображения: свойство background-attachment
  • 1.5 5. Позиционирование изображений: свойство background-position
  • 1.6 6. Область рисования: свойство background-clip
  • 1.7 7. Область расположения фона: свойство background-origin
  • 1.8 8. Размер изображений: свойство background-size
  • 1.9 9. Краткая запись свойств фона: свойство background
  • 1.10 10. Множественные фоны
• 2 Способ 1
• 3 Способ 2
• 4 Способ 3
  • 4.1 Рекомендуем к прочтению

В данной статье речь пойдет о том, как поместить слой или элемент в HTML на передний/задний план при помощи CSS . А точнее при помощи свойства z-index .

Скорее всего, каждый из вас в детстве делал Аппликации . Это процесс, когда на лист бумаги поверх вы приклеиваете различные элементы — дома, деревья, облака и так далее. Получается что-то вроде подобия 3-d изображения, где каждый элемент, далее просто слой, наклеен поверх другого. Все они наклеены на лист бумаги.

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

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

Для начала стоит запомнить, что z-index не работает, если у элемента не задано свойство position с значениями absolute , relative или fixed . Это имеет место, так как накладываться, а следственно и размещать их на различных уровнях слоев нужно будет, только если вы начнете наезжать одним элементом на другой за счет position и bottom , top , left , right . Но не только в этом случае может понадобиться расставление z-index . Наезжать элементами друг на друга можно за счет отрицательных значений margin и другими способами.

Если вы не указываете z-index , то для всех элементов по-умолчанию он равен 0 . z-index может принимать как положительные так отрицательные целые значения. В случае значения по-умолчанию элементы будут накладываться друг на друга по тому, чем дальше прописан элемент в коде тем он будет на более переднем плане(в Демо пример №1).

Вот как может выглядеть код CSS -стилей для 3

Важно понимать, что браузер будет сравнивать z-index только у элементо расположенных на одном уровне вложенности и, даже если у внутреннего элемента z-index больше, чем у элементов расположенных на одном уровне с его родителем, то он будет отображаться на заднем плане по отношению к ним (в Демо пример №3).

Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.

Свойства фона не наследуются, но фон родительского блока будет просвечивать по умолчанию из-за начального значения в background-color: transparent .

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

Свойства фона html-элементов

• Содержание:
• 1. Базовый цвет: свойство background-color
• 2. Источник изображения: свойство background-image
• 3. Укладка изображений: свойство background-repeat
• 4. Фиксация изображения: свойство background-attachment
• 5. Позиционирование изображений: свойство background-position
• 6. Область рисования: свойство background-clip
• 7. Область расположения фона: свойство background-origin
• 8. Размер изображений: свойство background-size
• 9. Краткая запись свойств фона: свойство background
• 10. Множественные фоны

1. Базовый цвет: свойство background-color

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

Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

Свойство не наследуется.

background-color
Значения:
цвет	Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 1. Свойство background-color для разных элементов

2. Источник изображения: свойство background-image

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

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

Свойство не наследуется.

3.

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

Свойство не наследуется.

background-repeat
Значения:
repeat-x	Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat .
repeat-y	Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat .
repeat	Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat . Значение по умолчанию.
space	Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space .
round	Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round .
no-repeat	Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repea t.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 2. Свойство background-repeat

4. Фиксация изображения: свойство background-attachment

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

Свойство не наследуется.

5. Позиционирование изображений: свойство background-position

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

Свойство не наследуется.

background-position
Значения:
%	Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона — высота фонового изображения , где размер изображения — это размер, заданный свойством background-size . Значение по умолчанию 0% 0% .
длина	Значение длины дает фиксированную длину в качестве смещения.
left	Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края.
center	Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано.
right	Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края.
top	Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края.
bottom	Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Если указано только одно значение, второе значение считается center . Если заданы два значения в единицах длины или % , то первое значения представляет горизонтальную позицию, второе — вертикальную. Значения в единицах длины или % представляют смещение верхнего левого угла фонового изображения от верхнего левого угла области расположения фона.

Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, 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	Наследует значение свойства от родительского элемента.

Если для элемента установлено background-attachment: fixed , свойство не будет иметь эффекта.

Если для элемента заданы background-clip: padding-box , background-origin: border-box , background-position: top left , и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.

Рис. 7. Свойство background-origin

8. Размер изображений: свойство background-size

Свойство background-size устанавливает размер фоновых изображений.

Свойство не наследуется.

background-size
Значения:
auto	Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам.
длина	Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em .
%	Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном.
cover	Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain	Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 8. Свойство background-size

9. Краткая запись свойств фона: свойство background

Свойство background позволяет описать в одном объявлении следующие свойства фона: background-color , background-image , background-position , background-size , background-repeat , background-origin , background-clip и background-attachment . Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.

Если вы указываете в краткой записи фона свойство background-size , то его значения нужно будет записать через слеш / , чтобы отделить его от свойства background-position .

10. Множественные фоны

Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image . Значение none по-прежнему создает слой.

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

Рис. 9. Пример использования нескольких фоновых изображений

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только 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. Если Вы о них знаете, поделитесь, пожалуйста, комментариях.

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

 
 
 
Всем привет на prosmo3.ru. Очень часто так бывает, что хочется вставить большую и красочную, понравившуюся вам картинку фоном для вашего сайта. А обращаться к профессионалам не всегда есть желание и средства. Да и зачем кому то платить, если сделать на сайте картинку фоном проще простого! Для этого потребуется свежая голова и трезвые мысли, а также любой html редактор. В принципе вы можете воспользоваться и средствами самого вордпресс, если делаете сайт как я, в онлайне, без посторонних редакторов. Я пробовал как то воспользоваться в админке внешний вид —-> меню, так сказать стандартным способом, но что то у меня там все так втупило, что я больше туда не лез и начал работать с файлами стилей.

Итак для того чтобы сделать картинку фоном на сайте нам необходимо проделать несколько вещей:

• Найти эту картинку, желательно в высоком разрешении. Очень прикольно в таком случае смотрятся картинки, где середина пуста, а сбоку что то нарисовано, для блога это оптимальный результат. В принципе, сейчас и сайты стремятся к форматному блогу, так как это красиво и аккуратно.
• Прописать код в файле css, который поможет нам сделать картинку фоном на сайте.
• Прописать дивы в <body>

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

Делаем картинку фоном на сайте в css

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

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

• no-repeat означает не повторять картинку ни по горизонтали, ни по вертикали. Если вы хотите сделать фоном картинку маленькую и повторяющуюся вам необходимо указать повторение по x или y оси.
• repeat-y повторение по вертикали
• repeat-x повторение по горизонтали, если вы укажите просто Repeat то повторение будет как по вертикале, так и по горизонтали.
• Ну а center top указывает на то что картинку необходимо отцентровать и прижать к верхнему краю, это очень хороший рабочий метод и подойдет вам практически ко всем целям.

Дальше нам необходимо найти тег <body> в структуре сайта. У меня он находится в header, шапке сайта. Смотрим рисунок:

Как видите происходит вставка кода из css, делается это с помощью такого кода:

<div>

Как видно под стрелками у меня вставлены два контейнера таким образом. Ну а 3 стрелка показывает на код вывода логотипа для сайта.
Не забудьте закрыть тег </div>.

Какие фоны бывают на сайте

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

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

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

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

Рекомендую к прочтению:

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

Следующий урок: Яндекс Метрика на вашем сайте, просто и легко.

Предыдущий урок: Кнопка вверх на сайте.

Также можете посмотреть видео ютуб как сделать картинку фоном на сайте.

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

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

Основные теги HTML для создания фона

Итак, переходим к вопросу, как сделать картинку фоном в html на весь экран. Для того чтобы сайт красиво выглядел, необходимо понимать одну достаточно важную деталь: достаточно просто сделать градиентный фон или закрасить его однотонным цветом, но если вам необходимо вставить на задний план картинку, она не будет растягиваться на всю ширину монитора. Изображение изначально нужно подобрать или самостоятельно сделать дизайн с таким расширением, в котором у вас будет отображаться страница сайта. Только после того как фоновое изображение готово, переносим его в папку с названием «Images». В ней мы будем хранить все используемые картинки, анимации и другие графические файлы. Эта папка должна находиться в корневом каталоге со всеми вашими файлами html. Теперь можно переходить и к коду. Существует несколько вариантов записи кода, с помощью которого фон будет меняться на картинку.

1. Написать атрибутом тега.
2. Через CSS стиль в HTML коде.
3. Написать CSS стиль в отдельном файле.

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

1. Первый способ записи через атрибут тега (body) в файле index.htm. Он записывается в таком виде: (body background= «Название_папки/Название_картинки.расширение»)(/body). То есть если у нас картинка с названием «Picture» и расширением JPG, а папку мы назвали как «Images», тогда запись HTML-кода будет выглядеть так: (body background=»Images/Picture.jpg»)… (/body).
2. Второй метод записи затрагивает CSS стиль, но записывается в том же файле с названием index.htm. (body).
3. И третий способ записи производится в двух файлах. В документе с названием index.htm в теге (head) записывается такая строчка: (head)(link rel=»stylesheet» type=»text/css» href=»Путь_к CSS_файлу»)(/head). А в файле стилей с названием style.css уже записываем: body {background: url(Images/Picture.jpg’)}.

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

Способы растягивания фоновой картинки на ширину окна

Представим наш экран в процентном виде. Получается, что вся ширина и длина экрана будет составлять 100% х 100%. Нам необходимо растянуть картинку на эту ширину. Добавим к записи изображения в файл style.css строку, которая и будет растягивать изображение на всю ширину и длину монитора. Как это записывается в CSS стиле? Все просто!

body

{

background: url(Images/Picture.jpg’)

background-size: 100%; /* такая запись подойдет для большинства современных браузеров */

}

Вот мы и разобрали, как сделать картинку фоном в html на весь экран. Есть еще способ записи в файле index.htm. Хоть этот метод и устаревший, но для новичков необходимо его знать и понимать. В теге (head)(style) div { background-size: cover; } (/style) (/head) эта запись означает, что мы выделяем специальный блок для фона, который будет позиционироваться по всей ширине окна. Мы рассмотрели 2 способа, как сделать фон сайта картинкой html, чтобы изображение растягивалось на всю ширину экрана в любом из современных браузеров.

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

Если вы решили использовать картинку в качестве фона будущего веб-ресурса, тогда вам просто необходимо узнать, как его сделать неподвижным, чтобы он не растягивался в длину и не портил эстетичный вид. Достаточно просто с помощью HTML кода прописать это небольшое дополнение. Вам необходимо в файле style.css дописать одну фразу после background: url(Images/Picture.jpg’) fixed; или вместо нее добавить после точки с запятой отдельную строчку — position: fixed. Таким образом, ваш фоновый рисунок станет неподвижным. Во время прокрутки контента на сайте, вы увидите, что текстовые строки двигаются, а фон остается на месте. Вот вы и научились, как в html сделать фон картинкой, несколькими способами.

Работа с таблицей в HTML

Многие неопытные веб-разработчики, сталкиваясь с таблицами и блоками, часто не понимают, как в html сделать картинку фоном таблицы. Как и все команды HTML и CSS стиля, этот язык веб программирования достаточно простой. И решением такой задачи будет написание пары строк кода. Вы уже должны знать, что написание табличных строк и столбцов обозначается соответственно как теги (tr) и (td). Чтобы фон таблицы сделать в виде изображения, необходимо дописать к тегу (table), (tr) или (td) простую фразу с указанием ссылки на картинку: background = URL картинки. Для наглядности приведем пару примеров.

Таблицы с картинкой вместо фона: HTML примеры

Нарисуем таблицу 2х3 и сделаем ее фоном картинку, сохраненную в папке “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблица будет закрашена в фон картинки.

Теперь нарисуем эту же табличку размерами 2х3, но вставим картинку в столбики под номером 1, 4, 5 и 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5(/td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.

Кроссбраузерность сайта

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

где применять и как сделать самому

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

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

Что такое резиновый фон и как им пользоваться?

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

Как же его можно заприметить на веб-сервисах? Очень просто. При увеличении или уменьшении окна браузера внедренные объекты (текст, рисунки, кнопки и т.д.) будут сдвигаться, подстраиваясь под размер вкладки.

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

Каким образом создается резиновый фон?

Существует несколько способов «превращения» обычного изображения в растягиваемое. Все они используют одно и то же свойство. Отличие состоит только в том, что второй способ, о котором я расскажу, появился благодаря css3.

Главные инструменты, которые используются в обеих вариантах, это background-size и background.

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

Итак, начнем с первого и более старого варианта.

Растягиваемость картинки устанавливается при помощи процентов. Так, строка background-size: 100% растянет изображение на все окно браузера вне зависимости от его размера.

В некоторых случаях можно увидеть и такой код: background-size: 100% auto.

Атрибут auto отвечает за вертикальное размещение картинки, которое должно автоматически подстраиваться под высоту вкладки.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Растягиваемый фон</title>
  <style>
   body {
    background: url(https://www. zastavki.com/pictures/originals/2012/Nature_Flowers_Big_flowers_of_a_sunflower_036583_.jpg) no-repeat center center fixed;
    -o-background-size: 100% auto; 
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto; 
    background-size: 100% auto; 
  text-align: center;
color: #8B2500;
   }
div {
background: #FFFACD;
border: 5px double #FFA500;
width: 86%;
 margin: 4% 4% 4% 4%;
padding: 35px;
} 
h2 {
color: #FFA500;
text-shadow: 2px 2px 1px #8B4513;
}
  </style>
 </head>
 <body>
<div>
 <h2>Создайте солнечное настроение вместе с туристической компанией "Подсолнух"</h2>
 <p>Мы предлагаем туры в солнечную Мексику, загадочный Египет, великолепную Францию...</p>
</div>
 </body>
</html>

Обратите внимание на такие моменты:

1. background: url (http://www. zastavki.com/pictures/originals/2012/Nature_Flowers_Big_flowers_of_a_sunflower_036583_.jpg) no-repeat center center fixed. В этой строчке кода я описал изображение как фиксированное (оно не будет скролироваться вместе с содержимым веб-страницы) и не повторяющееся.
2. Что касается слов center center, то они указывают, какая именно часть изображения всегда будет видна вне зависимости от масштаба. Первый параметр отвечает за левый и правый край рисунка, а второй – верхний и нижний край. Таким образом можно закрепить изображение так: left bottom.
3. В этом случае указанные границы всегда будут видны пользователю и само фоновое изображение сместиться. Также можно задавать данные значения через пикселы. Например, вместо первого параметра пишем 150px и тогда изображение сдвинется вправо на указанное число единиц.
4. margin: 4% 4% 4% 4%. Такой способ указания отступов позволит даже в маленьком окне браузера сохранить расстояние между краями вкладки и блоком с текстом.

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

Во втором способе создания резинового фона используется ключевое свойство cover, которое появилось в спецификации css3.

Замените у background- size параметры 100% auto на cover и оцените результат.

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

С уважением, Роман Чуешов

Прочитано: 1060 раз

Понравилась статья? Поделись с друзьями:

Этот блог уже читают
читай и ты!

Css как поставить картинку на фон

background-image

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

Синтаксис

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundImage

Браузеры

Internet Explorer до версии 7.0 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout . Если у элемента нет hasLayout , свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные ( dashed или dotted ), а не сплошные.

Если для элемента значение overflow установлено как scroll или auto , в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Если фон задаётся для строки таблицы (тег <tr> ), то Chrome, Safari, iOS отображают его не так, как предписывает спецификация, а именно для каждой ячейки отдельно. В то время как браузер должен показывать цельный фон для всего ряда. В примере 2 приведён код демонстрирующий ошибку.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).

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

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

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

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

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам <h2>, <p>, так и ко всему веб-сайту с помощью тега <body>.

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 — полную прозрачность.

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

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

Основы работы с фоном

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

Давайте зальем блок зеленым фоном (цвет текста при этом сделаем белым):

Так код будет выглядеть в браузере:

Блок . Свойство background-image

Свойство background-image задает фоновую картинку. Делается это следующим образом: background-image: url(«путь к картинке»).

Путь к картинке обычно берут в кавычки (двойные или одинарные), но можно также и без них.

Давайте в качестве фона блоку зададим следующую картинку:

Смотрите, что у нас получится — наша картинка размножится по всему блоку, замостит его:

Так код будет выглядеть в браузере:

Блок . Свойство background-repeat

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

Оно позволяет делать следующее: если задать значение no-repeat, то картинка вообще не будет повторяться, если задать значение repeat-x — будет повторяться по оси X (то есть по горизонтали), а если repeat-y — картинка будет повторяться по оси Y (по вертикали).

Ну, а значение repeat задает поведение по умолчанию — картинка будет повторяться по всем осям.

Давайте посмотрим, как работает это свойство.

Значение no-repeat

Давайте свойству background-repeat зададим значение no-repeat — в этом случае картинка не будет повторяться вообще и станет в верхний левый угол:

Так код будет выглядеть в браузере:

Значение repeat-x

А теперь зададим значение repeat-x — фоновая картинка станет повторяться по горизонтали:

Так код будет выглядеть в браузере:

Значение repeat-y

Ну, а теперь сделаем так, чтобы картинка повторялась по вертикали, задав свойству background-repeat значение repeat-y:

Так код будет выглядеть в браузере:

Блок . Свойство background-position

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

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

Сдвиг фона ключевыми словами

С помощью ключевых слов можно двигать фон по горизонтали и по вертикали, но не в любое место, а в определенные позиции. К примеру, по горизонтали фон можно поставить слева (значение left), справа (значение right) и по центру (значение center), а по вертикали — сверху (значение top), по центру (значение center) и снизу (значение bottom).

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

К примеру, значение right bottom, поставит фон в правый нижний угол, значение left bottom — в левый нижний угол, а значение left center — поставит фон по центру слева. Если вы хотите поставить фоновую картинку по центру всего блока — напишите center center. При этом можно использовать сокращенный вариант — не писать слово center два раза, а указать его один раз.

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

Поставим для свойства background-position значение right bottom — правый нижний угол:

CSS свойство background-image — GeeksforGeeks

Просмотреть обсуждение

Улучшить статью

Сохранить статью

• Уровень сложности: Эксперт
• Последнее обновление: 01 июл, 2022

Посмотреть обсуждение

Улучшить статью

Сохранить статью

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

Синтаксис:  

 background-image: url('url')|none|initial|inherit; 

Значения свойств:

• url(‘url’): Указывает URL-адрес изображения. Чтобы указать URL-адрес более чем одного изображения, разделите URL-адреса запятой.
• нет: Это случай по умолчанию, когда изображение не отображается.
• начальный: Используется для установки значения свойства по умолчанию.
• inherit: Он наследует свойство от своего родительского элемента.

Свойство background-image также можно использовать со следующими значениями:

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

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

url(‘url’): Когда фоновое изображение имеет URL.

Синтаксис:

 background-image: url('url') 

Пример 1: Этот пример иллюстрирует свойство background-image, задав значение url как url.

HTML

Выход:

Нет: имущество.

Синтаксис:  

 background-image: url('url') none 

Пример 2: Этот пример иллюстрирует свойство background-image, задав значение url равным none.

HTML

Output:

начальный: Устанавливает для свойства значение по умолчанию.

Синтаксис:

 background-image: url('url') initial; 

Пример 3: Этот пример иллюстрирует свойство background-image, задав значение url как начальное.

HTML

. 0003

Supported Browsers: The browser supported by background-image Property are listed below: 

• Google Chrome 1.0
• Microsoft Edge 12.0
• Firefox 1.0
• Internet Explorer 4.0
• Opera 3.5
• Safari 1.0

 .fitting-image {
  ширина: 150 пикселей;
  высота: 150 пикселей;
  объект-подгонка: <какое-то значение>;
} 

 .strange-size-background-image {
  размер фона: 1234px 5678px;
} 

 .origin-border-clip-content {
  background-origin: рамка-бокс;
  фоновый клип: поле содержимого;
} 

 .background-cliped-to-text {
  цвет: прозрачный;
  фоновый клип: текст;
  -webkit-background-clip: текст;
} 

 .some-class {
  border-radius: <обязательное значение>;
} 

 .clipped-image {
  клип-путь: <клип-источник> | [ <базовая форма> || <поле геометрии> ] | никто
}