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

Нам нужна картинка для «заднего фона«, у нас есть вот такая картинка:

Выведем её прямо здесь:

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

Вам потребуются некие стили css для установки данной картинки на задний фон страницы:

background-size: cover; — растягиваем задний фон на всю ширину и высоту.

overflow: hidden; — применяем если не требуется прокрутка:

Стили(style) для «заднего фона картинкой«

Как вы знаете, что существует «3 способа css», выберем размещение кода в style прямо на странице.

background: url(https://dwweb.ru/путь../back.png)no-repeat center center fixed;

Пример картинки на заднем фоне сайта

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

Код готовой страницы с картинкой на заднем фоне

Где взять «Код готовой страницы с картинкой на заднем фоне», чтобы все работало? Выше пунктом я разобрал пример «как поставить картинку на задний фон» на отдельной странице.

Мне останется взять, уже готовый код «с задним фоном картинкой» и разместить его здесь:

Картинку можно взять здесь

<strong>Пример страницы с картинкой на заднем фоне</strong>

background: url(back.png)no-repeat center center fixed;

Пример простой страницы — для того, чтобы посмотреть код, нажмите ctrl + U

Пример страницы с установленной картинкой на заднем фоне

Данный код с установленной картинкой на заднем фоне разместим здесь

Установка «картинки на задний фон» с помощью before

Еще один способ поставить «картинку на задний фон» — для этого нам понадобится:

Картинка, которую будем ставить «задним фоном» :

Выведем картинку для заднего фона, прямо здесь с помощью тега img:

Установка ‘картинки на задний фон‘ с помощью before

Далее нам понадобится теория использования псевдокласса — before

После изучения теории вы сможете написать стили для заднего фона картинкой с помощью before и ваши стили превратятся вот в такие:

background: url(https://dwweb.ru/__img/__background/dwweb.ru_500x500.png)center/cover no-repeat;

Соберем весь код html + css:

Как добавить фон на страницу. CSS background-image

background-image позволяет добавить изображение в качестве фона для выбранного элемента. Фоновое изображение может быть любого типа и повторяться или масштабироваться в зависимости от настроек.

Синтаксис

selector

Значения

url(‘путь_к_изображению’) — указывает путь к изображению. Вы можете указать относительный путь к изображению на вашем сервере или абсолютный URL для изображения в интернете.
none — значение по умолчанию, где нет фона. Если не хотите использовать изображение в качестве фона, вы можете установить background-image: none; .
linear-gradient() , radial-gradient() , repeating-linear-gradient() , repeating-radial-gradient() — создают градиент фона без использования изображений. Можно определить цветовую палитру и ориентацию градиента.

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

background-repeat: repeat; — значение по умолчанию, изображение повторяется по горизонтали и вертикали. Изображение будет заполнять фон элемента, повторяясь при необходимости.

background-repeat: repeat-x; — повторяется только по горизонтали.

background-repeat: repeat-y; — повторяется только по вертикали.

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

Размер изображения

background-size: auto; — отображается в своём естественном размере.

background-size: cover; — масштабируется так, чтобы полностью заполнить фон элемента, возможно, обрезая его.

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

Наследование

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

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

Добавление изображения на фон определённого элемента:

 Здесь паучок

.container < width: 600px; height: 300px; background-image: url('01.jpg'); background-size: cover; /* размер одного повторяющегося изображения */ >h1

Добавление повторяющегося изображения на фон элемента

 Здесь паучок

.container < width: 600px; height: 300px; background-image: url('01.jpg'); background-repeat: repeat; >h1

Добавление градиента на фон

  Здесь нет паучка

.container < width: 600px; height: 300px; background-image: linear-gradient(to right, #E2BCBB, #E4514A); >h1

Нюансы использования

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

⭐ Поддержка браузерами свойства background-image

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

Как размыть картинку
Обзор цветовых форматов в 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

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

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

background-color

background-color: #ff0507;

background-image: url(dubi.png);

Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png. Также можно использовать абсолютные адреса URL, например:

background-image: url(http://localhost.com/someimage.png);

Либо можно использовать относительные адреса — относительно html-документа или корневого каталога сайта:

background-image: url(../images/someimage.png); /* путь относительно html-документа */

как сделать картинку фоном

    Блочная модель в CSS3 div < width: 250px; height: 200px; margin: 10px; >.colored < background-color: #ff0507; >.imaged Первый блок
 Второй блок

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

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

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

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

Читайте также Линейный градиент CSS

Размер изображения

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

contain: масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение
cover: масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение
auto: значение по умолчанию, изображение отображается в полный размер

Если нужно масштабировать изображение таким образом, чтобы оно оптимальнее было вписано в фон, то для обеих настроек можно установить значение 100%:

background-size: 100% 100%;

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

background-size: 200px 150px; /* ширина 200 пикселей, высота 150 пикселей */

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

background-size: 200px auto; /* ширина 200 пикселей, автоматическая высота */

    Блочная модель в CSS3 div < width: 200px; height: 150px; margin: 10px; border: black solid 1px; background-image: url(dubi.png); >.imaged1 < background-size: cover; >.imaged2

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

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

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

background-position: отступ_по_оси_X отступ_по_оси_Y;

    Блочная модель в CSS3   Туман начинал расходиться, и неопределенно, верстах в двух расстояния, виднелись уже неприятельские войска на противоположных возвышенностях.

Читайте также Фильтры в CSS для редактирования изображений.

Кроме того, данное свойство может принимать одно из следующих значений:

top: выравнивание по верхнему краю элемента
left: выравнивание по левому краю элемента
right: выравнивание по правому краю элемента
bottom: выравнивание по нижнему краю элемента
center: изображение располагается по центру элемента

background-position: top right;

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

background-attachment

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

fixed: фон элемента фиксирован вне зависимости от прокрутки внутри элемента
local: по мере прокрутки внутри элемента фон изменяется
scroll: фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой фон, тогда как при fixed создается один фон для всех элементов

background-origin

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

border-box: фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border
padding-box: фон устанавливается с учетом внутренних отступов
content-box: фон устанавливается по содержимому элемента

Используем все три значения:

    Блочная модель в CSS3 div < width: 200px; height: 200px; margin: 10px; display: inline-block; /* располагаем блоки в ряд */ color: #eee; padding:15px; border: 15px solid rgba(23,23,23,0.2); background-image: url(img/phone-touch.jpg); background-size: cover; background-repeat: no-repeat; >.borderBox .paddingBox .contentBox  Вся власть - котикам!
 Вся власть - котикам!
 Вся власть - котикам!

background-clip

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

border-box: изображение обрезается по границам элемента
padding-box: из изображения исключается так часть, которая находится под границами элемента
content-box: изображение обрезается по содержимому с учетом внутренних отступов

Читайте также Границы CSS

Например, если к предыдущей разметке мы применим следующие стили:

div < width: 200px; height: 200px; margin: 10px; display: inline-block; color: #eee; padding:15px; border: 15px solid rgba(23,23,23,0.1); background-image: url(cats.jpg); background-size: cover; background-repeat: no-repeat; >.borderBox .paddingBox .contentBox

Тогда мы получим следующий результат:

как сделать картинку фоном

Свойство background

Свойство background по сути является сокращением всех ранее рассмотренных свойств CSS в формате:

background:

Например, если у нас есть следующий набор свойств:

background-image: url(cats.jpg); background-color: #eee; background-repeat: no-repeat; background-clip: border-box; background-origin: border-box; background-attachment: local;

То мы их можем сократить следующим образом:

background: #eee no-repeat border-box local url(cats.jpg);

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

background — image

Полезное свойство, если нужно поставить на фон картинку или задать декоративное изображение. Можно даже градиент!

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Кратко
Пример
Как пишется
1. Картинка плюс цвет
2. Несколько фоновых картинок
3. Градиент на фоне
1. Егор Левченко советует
2. Алёна Батицкая советует
Контрибьюторы:

Обновлено 2 февраля 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство background — image задаёт элементу фоновую картинку.

Пример

Скопировать ссылку «Пример» Скопировано
```
 div  background-image: url("фоновое-изображение.jpg");> div  background-image: url("фоновое-изображение.jpg"); >      
```
Как пишется

Скопировать ссылку «Как пишется» Скопировано
```
 div  background-image: url("адрес-картинки");> div  background-image: url("адрес-картинки"); >      
```
- url — адрес картинки, он пишется в кавычках внутри скобок: url ( «cat _ box . png» ) .
- none — сбрасывает фоновую картинку (значение по умолчанию).
Границы картинки и её расположение относительно краёв элемента мы задаём с помощью background — clip и background — origin .

Картинка плюс цвет

Скопировать ссылку «Картинка плюс цвет» Скопировано

Элементу желательно задать одновременно и цвет фона background — color , и фоновую картинку. Если картинка не загрузится, то вместо неё пользователь увидит фоновый цвет.
```
 body  background-image: url("background.png"); background-color: #09ff00;> body  background-image: url("background.png"); background-color: #09ff00; >      
```
Несколько фоновых картинок

Скопировать ссылку «Несколько фоновых картинок» Скопировано

Фоновых картинок можно задать сколько угодно. Они будут накладываться друг на друга, причём сверху будет та, которая указана в списке первой. Если у картинки прозрачный фон, то под ней будет видна следующая. И так до бесконечности.
```
 body  background-image: url("confetti.png"), url("landscape.jpg"); background-color: gray;> body  background-image: url("confetti.png"), url("landscape.jpg"); background-color: gray; >      
```
Если у первой картинки фон не прозрачный, то следующая по счёту картинка будет видна только в случае, если первая не загрузилась.

Градиент на фоне

Скопировать ссылку «Градиент на фоне» Скопировано

С помощью background — image также можно сделать градиентный фон. Например, так:
```
 div  background-image: linear-gradient(red, yellow, green);> div  background-image: linear-gradient(red, yellow, green); >      
```
Подробнее о градиентах можно прочитать в статьях о linear — gradient , radial — gradient и conic — gradient ( ) .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Разные браузеры могут отображать фоновую картинку по-разному. Например, если вы задаёте фоновую картинку внутри таблицы для одной строки целиком, то Chrome и Safari продублируют эту картинку в каждой ячейке, тогда как остальные растянут картинку на всю строку.

На практике

Скопировать ссылку «На практике» Скопировано

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

Чтобы это исправить, нужно добавить элементу необходимые ширину и высоту. А ещё не забыть про background — repeat и background — size , чтобы фон выглядел отлично.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

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

Пример ниже не пустой, но в нём не загрузилась фоновая картинка:
```
   Фронтенд-блог: чиним вёрстку одной строкой  div> h1>Фронтенд-блог: чиним вёрстку одной строкойh1> div>      
```
```
 div  background-image: url("broken-link-to-image.png");> h1  color: white;> div  background-image: url("broken-link-to-image.png"); > h1  color: white; >      
```
Чиним одной строкой:
```
 .element  background-image: url("broken-link-to-image.png"); background-color: #18191C;> .element  background-image: url("broken-link-to-image.png"); background-color: #18191C; >      
```
Да, будет не так красиво, как нарисовал дизайнер, но вся информация будет доступна.

�� Кроме линейного градиента можно задавать радиальный — круглый — градиент. Для этого нужно написать следующее:
```
 div class="spread-gradient">div> div class="smooth-circle">div> div class="sharp-circle">div>      
```
```
 .spread-gradient,.smooth-circle,.sharp-circle  width: 200px; height: 200px;> .spread-gradient  background-image: radial-gradient(#e6e6e6, #1a5ad7);> .smooth-circle  background-image: radial-gradient(#e6e6e6, #1a5ad7 70%);> .sharp-circle  background-image: radial-gradient(#e6e6e6 70%, #1a5ad7 70%);> .spread-gradient, .smooth-circle, .sharp-circle  width: 200px; height: 200px; > .spread-gradient  background-image: radial-gradient(#e6e6e6, #1a5ad7); > .smooth-circle  background-image: radial-gradient(#e6e6e6, #1a5ad7 70%); > .sharp-circle  background-image: radial-gradient(#e6e6e6 70%, #1a5ad7 70%); >      
```
Читать:
Как поставить таймер на выключение компьютера на windows 7