Как поставить картинку на задний фон
Перейти к содержимому

Как поставить картинку на задний фон

  • автор:

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

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

Общий синтаксис добавления фона следующий.

 body 

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

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

Пример 1. Добавление фона

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Фон   

.

В данном примере фон веб-страницы задан цветом хаки, а текст — белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.

Измените фон изображения

Отправляя изображение или URL-адрес, вы соглашаетесь с нашими Условия предоставления услуг. Чтобы узнать больше о том, как remove.bg обрабатывает ваши персональные данные, ознакомьтесь с нашей Политика конфиденциальности.

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

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

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

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

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

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

design-development-electronics-326424.jpg

Способ 1

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

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

html < background-image: url(images/background.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; >

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

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

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

Способ 2

Этот способ предусматривает использование элемента img, размер которого будет изменяться в зависимости от размера окна браузера. Чтобы растянуть изображение на весь экран, ему необходимо задать min-height и width со значением 100%. А чтобы изображение не сжималось до размера меньшего, чем оригинальный, установим min-width со значением равным ширине картинки.

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

img.background < min-height: 100%; min-width: 640px; width: 100%; height: auto; position: fixed; top: 0; left: 0; /* Зависит от размера изображения */ @media screen and (max-width: 640px)< img.bg < left: 50%; margin-left: -320px; >> >

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

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

Способ 3

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

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

 
div.background < position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; >img

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

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

Добавление фонового рисунка

Ваш браузер не поддерживает видео. Установите Microsoft Silverlight, Adobe Flash Player или Internet Explorer 9.

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

Добавление фонового рисунка

  1. Выберите слайд, на который вы хотите добавить фоновый рисунок.
  2. На вкладке Конструктор нажмите кнопку Формат фона.

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

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

Удаление фонового рисунка

  1. Выберите слайд, с которого вы хотите удалить фоновый рисунок.
  2. На вкладке Конструктор нажмите кнопку Формат фона.

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

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