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

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

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

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

1.Вставить код в саму страницу.

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

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

Пропишем в самой странице код заднего фона.

Опять же, для этого есть несколько вариантов решения:

Изменим код на странице:

Код страницы будет такой:

С использованием стилей css, но все равно в самой странице.

После титлов вставляем такой код:

Код страницы будет такой:

Как поставить на задний фон картинку с помощью css.

Здесь имеется ввиду css = отдельный файл css.

2.Задний фон с помошью css.

Для этого нам потребуется:

А.Создать файл стилей css .
Б.Прописать код с задним фоном а файле стилей.
>В.Прикрепить файл стилей css к нашей странице.
А.

Для использования css для заднего фона, создадим отдельный файл стилей css, назовём его

В самом файле стилей css, делаем такую надпись:

Прикрепим его к странице, написав такой текст ниже титлов:

Код страницы будет такой:

Смотрим, что у нас получилось.

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

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

И еще как сделать что бы задний фон был зафиксирован и установить прозрачность?

P.S
В этом деле я новичек так что не судите строго код

Как вставить на задний фон картинку?
помогите пожалуйста вставить на задний фон картинку(вместо серого)

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

Как поставить картинку на фон.
http://htmlworker.ru/portfolio/fish_verstka/index.html вот сайт, интересно как делается картинка на.

Сообщение от Treals
Сообщение от Tanya8189
Сообщение от Tanya8189

Как поставить картинку на передний фон?
Здравствуйте, подскажите как на сайте http://www.test.nemogy.ru верхнюю новогоднюю картинку.

Как сделать такой задний фон? (CSS)
Как сделать задний фон как на фото через css, то-есть, что бы цвет был голубым, но шли диагональные.

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

Добавление фонового изображения в div с помощью css?

Я пытался добавить фоновое изображение в класс div с помощью css. но безуспешно.

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

8 ответов

вам нужно добавить width и height фонового изображения для его правильного отображения.

Например,

как вы упомянули, что используете его в качестве тени, вы можете удалить width и добавить background-repeat (вертикально или горизонтально, если требуется).

Например,

надеюсь, что это помогает.

PS: xx фиктивное значение, вам нужно заменить его с вашими фактическими значениями вашего образа.

дайте высоту и ширину:

это происходит потому, что .header-shadow пусто.

дать height к нему.

использовать изображение для фона тела в CSS

добавьте свойства height & width к вашему.файл CSS.

вы можете попробовать это также для установки класса в разделе div;

Похожие публикации:

1. В чем основная задача css
2. Для чего необходимы css
3. Как сделать расстояние между элементами списка css
4. Как сделать слайдер в html и css

Как установить фон в CSS. Cвойство background

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

background также объединяет в себе несколько других свойств:

• background-color — задаёт цвет фона элемента;
• background-image — устанавливает фоновое изображение для элемента;
• background-position — определяет начальную позицию фонового изображения;
• background-repeat — указывает, должно ли фоновое изображение повторяться;
• background-size — устанавливает размер фонового изображения;
• background-attachment — определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента.

�� Свойство поддерживается современными браузерами. Актуальная информация — на caniuse.com.

Синтаксис

selector

Значения и примеры использования

Background-color

Свойство background-color задаёт цвет фона элемента. Значение задаётся в виде hex-кодов, RGB-функций или названий цветов:

background-color: #FFA500; /* Оранжевый цвет фона с помощью hex-кода */ background-color: rgb(255, 0, 0); /* Красный цвет фона с помощью RGB-значения */ background-color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный фон с помощью RGBA-значения */ background-color: white; /* Цвет фона с помощью ключевого слова */ background-color: transparent; /* Прозрачный фон */ background-color: inherit; /* Наследует цвет фона */ 

.options

Background-image

Свойство background-image позволяет задать изображение в качестве фона элемента. Это может быть любой тип изображения, включая jpeg, png, gif, svg и другие. Значение этого свойства указывается в формате URL, который ссылается на изображение.

.image-section < height: 300px; background-image: url("./images/nunzio-guerrera-uWZL-6wsUt4-unsplash.jpg"); background-size: cover; background-position: center; >

Также есть возможность использовать несколько изображений для фона. Для этого нужно указать несколько значений url() через запятую. При этом каждое изображение будет располагаться друг над другом, начиная с первого указанного значения.

Background-repeat

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

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

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

section < height: 200px; background-image: url("./images/image.jpg"); background-repeat: repeat; color: #070707; >

Background-position

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

.position < background-image: url("./images/image.jpg"); background-size: cover; background-position: 50% 50%; padding: 50px; color: #ffffff; >

Background-size

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

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

.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: cover; background-position: center; >

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

.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: contain; background-position: center; >

Background-attachment

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

• scroll — фоновое изображение прокручивается вместе с элементом, как обычный фон.
• fixed — фоновое изображение остается на месте, когда элемент прокручивается.
• local — фоновое изображение фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте.

.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: contain; background-attachment: fixed; >

Нюансы

Если одновременно установлены background-color и background-image , то background-image будет отображаться поверх цвета фона.

Если установлен background-attachment: fixed , то позиционирование фона осуществляется относительно окна браузера, а не относительно элемента, на который установлен фон.

.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: cover; background-position: 50% 50%; background-attachment: fixed; >

Если значение background-size указано в процентах, то размер изображения будет задаваться относительно размера элемента.

Материалы по теме

• Полупрозрачный градиент над картинкой на чистом CSS
• Специфичность селекторов в CSS
• Обзор цветовых форматов в CSS

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

• 13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

Что такое CSS?

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

Как подключить CSS к HTML

Есть несколько способов использования CSS внутри HTML:

Внутренний CSS: внутри раздела HTML-документа, в теге :

Внешний CSS: создание отдельного CSS-файла и его подключение с помощью элемента :

Инлайновые стили: непосредственно в HTML-элементе, через атрибут style . Но это не очень хороший способ, лучше его не использовать, и вот почему.

Этот текст будет красного цвета.
 

Основы синтаксиса CSS

CSS состоит из селекторов и объявлений. Селектор указывает, к какому элементу HTML применяется стиль, а объявление состоит из свойства и его значения.

/* Селектор */ p < /* Свойство : Значение; */ color: green; font-size: 14px; >

Работа с цветом и фоном

Одни из самых основных свойств в CSS — это цвет и фон элементов.

color меняет цвет текста:

background-color меняет фоновый цвет элемента:

Типографика и шрифты

CSS позволяет нам контролировать шрифты на странице:

• font-family задаёт шрифт текста, даже если он нестандартный.
• font-size определяет размер текста.
• font-weight устанавливает жирность шрифта.

Блочная модель

Важной концепцией в CSS является блочная модель, которая включает в себя margin , border , padding , и content .

Внутренние и внешние отступы одной картинкой:

Позиционирование и Flexbox

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

.container < display: flex; /* Применяем Flexbox */ justify-content: center; /* Центрирование содержимого по горизонтали */ align-items: center; /* Центрирование содержимого по вертикали */ >

Адаптивный дизайн

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

@media (max-width: 600px) < .container < flex-direction: column; >> 

Это только начало пути в мир CSS, но зная эти основы, вы уже можете начать экспериментировать и применять стили к вашим веб-страницам. В следующей статье мы разберём JavaScript и увидим, как добавить интерактивность нашим веб-страницам. Удачи в творчестве и до новых встреч в коде! ����‍��

• 1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

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

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

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

Вот что получится в итоге:

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

• 28 июля 2023

CSS-свойство contain

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

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Фон для сайта с картинкой на весь экран (background-size)

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал как сделать большой фон для сайта — изображение помещалось в шапку блога и плавно «переходило» в основной фоновый цвет веб-страницы. При желании можно даже добавить ссылку на фон подложки.

Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье.

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

• заполнить всю страницу одним изображением без пробелов;
• изменение размеров картинки при необходимости (уменьшении окна браузера);
• сохранение пропорций изображения;
• расположение изображения в центре страницы;
• отсутствие полос прокрутки на странице;
• кросс-браузерное решение, подходящее для разных браузеров;
• реализация без всяких сторонних технологий типа flash.

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Решение поддерживают почти все браузеры популярные в сети:

• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
• Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
• Chrome Whatever+
• IE 9+
• Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’.myBackground.jpg’, sizingMethod=’scale’); -ms-filter: «progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’myBackground.jpg’, sizingMethod=’scale’)»;

Но внимание. при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS-хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

Дальше в хаке используется опция @media для проверки является ли окно браузера меньшим чем изображение и с помощью процентного значения left и свойства margin-left выравниваем картинку по центру.

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:

• IE 9 — работает;
• IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
• IE 6 — можно настроить, но кому вообще нужен этот браузер.

CSS-хак вариант 2

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

#bg { position:fixed; top:0; left:0; /* Preserve aspet ratio */ min-width:100%; min-height:100%; }

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

#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

• Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
• IE 8+
• Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше — можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

$(window).load(function() < var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() < if ( (theWindow.width() / theWindow.height()) < aspectRatio ) < $bg .removeClass() .addClass('bgheight'); >else < $bg .removeClass() .addClass('bgwidth'); >> theWindow.resize(function() < resizeBg(); >).trigger("resize"); >);

По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована — скачать можно здесь. В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные «приколы» от IE7 все упомянутые хаки были бы идеальными.

P.S. Хотите купить книгу? — не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть — выбрать, оплатить и оформить доставку на дом.

background-color поверх background-image в body

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

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

body < background-blend-mode: multiply; background-image: url(//i.stack.imgur.com/1ffAS.jpg); background-position: top; background-repeat: no-repeat; background-size: cover; background-color: rgba(255, 0, 0, 0.5); >

Отслеживать
ответ дан 25 июн 2016 в 18:32
Gleb Kemarsky Gleb Kemarsky
7,274 2 2 золотых знака 22 22 серебряных знака 45 45 бронзовых знаков

На момент публикации вопроса (23.06.2016), такие возможности CSS, как множественный фон и linear-gradient, уже поддерживались всеми основными браузерами, даже без префиксов. Потому странно видеть, что отсутствует самое очевидное решение:

body < /* Указав одинаковые значения цветов градиента, получаем однотонную заливку */ background-image: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)), url(https://i.stack.imgur.com/m9kuJ.jpg); background-position: top; background-repeat: repeat, no-repeat; background-size: auto, cover; >

Используя такой способ, можно добавлять сколько угодно градиентов и изображений (особенно интересно, если комбинировать изображения с прозрачными областями — например, формата PNG).

body < /* Указываем высоту и убираем отступы. */ min-height: 100vh; margin: 0; background-image: /* Самый верхний слой. */ url(https://i.imgur.com/pCm96IG.png), linear-gradient(#ffff, #fff1, #ffff), linear-gradient(to top, #00f0, #00f8), linear-gradient(to left, #0800, #0808), linear-gradient(to bottom, #fa00, #fa08), linear-gradient(to right, #f000, #f008), /* Самый нижний слой. */ url(https://i.stack.imgur.com/m9kuJ.jpg); /* Когда слоёв много, рекомендую задавать позицию и размер каждому слою - меньше путаницы. Значения задаются в том же порядке, в каком находятся слои в background-image. */ background-position: center 5vh, center 43.4vh, 0% 100%, 100% 100%, 100% 0%, 0% 0%, top; background-size: auto 40vh, 40vw 40vh, 40vw 40vh, 40vw 40vh, 40vw 40vh, 40vw 40vh, cover; /* Если какое-то свойство гарантированно одинаковое для всех слоёв, то можно задать его, как общее. */ background-repeat: no-repeat; >

Отслеживать
ответ дан 24 дек 2020 в 16:40
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

body < position: relative; min-height: 620px; background-image: url("../img/mnogoetazhka-%5B1600x1200%5D-%5B32918977%5D.jpg"); >body::before

Отслеживать
ответ дан 23 июн 2016 в 13:48
86 7 7 бронзовых знаков

Бывает так, что фоновая картинка задана элементу при помощи атрибута style . Для возможности редактирования фона из админки например. Тогда множественный background не подходит и можно использовать вариант с внутренней тенью.
box-shadow в браузерах 16 года имел хорошую поддержку.

body

Отслеживать
ответ дан 24 дек 2020 в 17:08
10.4k 2 2 золотых знака 14 14 серебряных знаков 36 36 бронзовых знаков

«Тогда множественный background не подходит. « Это почему же? Пишем background-image: url(. ) !important; и обходим style. При редактировании в админке, как правило, отсутствует возможность добавлять !important.

2 фев 2021 в 8:13

@UModeL , но ведь background-image: linear-gradient(полупрозрачный), url(. ) !important в файле стилей полностью заменит собой значение в атрибуте. Будет принудительно использоваться картинка, которая указана в url в файле стилей. А вывод типа