Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).
Итак, требования к фоновому изображению у нас следующие:
- Покрывается 100% ширины и высоты страницы
- Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
- Сохраняются пропорции картинки (aspect ratio)
- Изображение центрировано на странице
- Фон не вызывает скроллов
- Решение максимально кроссбраузерное
- Не используются никакие другие технологии кроме CSS
Способ 1
На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.
Как установить анимированные обои или свою тему в Вконтакте в Opera GX, Chrome.
Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя 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 для выравнивания бэкграунда по центру.
Этот способ работает в:
- Любой версии хороших браузеров (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+.
КАК УСТАНОВИТЬ ТЕМУ ДЛЯ ВК ┃VK STYLES
Надеюсь, эта информация будет для Вас полезной. Лично я частенько пользуюсь этими методами, особенно первым. Наверняка есть и другие способы поместить изображение на задний фон при помощи CSS. Если Вы о них знаете, поделитесь, пожалуйста, комментариях.
Источник: siterost.net
Как добавить на задний фон заставку
Как добавить на задний фон заставку ? Хочу добавить на задний фон картинку .png в окне mainWindow и dialog. Как правильно это сделать? Добавил код в styleSheet. QWidget < background-image: url(«/image/layer.png») no-repeat right bottom; >Фон должен быть на заднем плане а тут получается что на каждом lable и graphicsview он отобразился. 
Отслеживать
задан 18 мар 2020 в 5:04
666 3 3 серебряных знака 14 14 бронзовых знаков
Я не программирую qt, но знаю что там есть метод draw. он отвечает за рисование окна. может с помощью него можно картинку нарисовать.
– user302477
18 мар 2020 в 5:22
18 мар 2020 в 6:12
А как сделать фон у QMainWindow?
18 мар 2020 в 7:38
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Пропишите stylesheet. изображение необходимо разместить в ресурс
мне надо было разместить фоном логотип в правый нижний угол виджета дерева. при этом надо было зафиксировать положение чтобы фон не двигался при скролле. в редакторе задал stylesheet:
QTreeView < background: url(:/ico/background) no-repeat right bottom; background-size: cover; background-attachment: fixed; border-bottom-width: 5; border-right-width: 15; >
Следует помнить что стили наследуются на потомков (с учетом объектного наследования). Поэтому в вашем примере стиль для QWidget будет распространяться на всех потомков (поскольку все они являются наследниками QWidget). Чтобы этого избежать, задавайте стили для конкретных виджетов, а не для всего окна, либо указывайте конкретный класс: QTreeWidget, QFrame и т.п., либо используйте селекторы. Например:
QWidget[objectName=»centralWidget»] < background-image: url(«:/img/bg») no-repeat right bottom; >QWidget[objectName=»myFrame»] < background-color: #ff0000; >QLineEdit < background-color: #00ff00; >QWidget[enabled=»false»]
Источник: ru.stackoverflow.com
Фон для сайта (свойство CSS background)
Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript.
Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.
Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:
Background-color
Задает цвет фона. Можно применять к отдельным элементам ,
или ко всему сайту через через тэг :
/* черный фон сайта */ body { background-color: #000; } /* черный фон заголовка, белый цвет шрифта */ h1 { color: #fff; background-color: #000; }
/* черный фон сайта */ body < background-color: #000; >/* черный фон заголовка, белый цвет шрифта */ h1
Background-image
Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:
body { background-color: #000; background-image: url («my-image.jpg»); }
Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать полный путь к изображению. Опция пригодится если вы захотите, например, добавить кликабельный фон на сайте.
Background-size
Определяет размер фонового изображения.
div { background: url(my-image.jpg); background-size: 100% 100%; background-repeat: no-repeat; }
Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.
Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.
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
Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:
- в фиксированных единицах (пикселы, сантиметры)
- в процентах
- словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
- background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
- background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
- background-position: right bottom — рисунок располагается снизу справа.
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
background: #000 url(«my-image.jpg») no-repeat fixed left bottom;
background: #000 url(«my-image.jpg») no-repeat fixed left bottom;
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!
Источник: dsgnmania.com