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

css фон картинка на весь экран

Автор admin На чтение 6 мин.

Задача

Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS3.

Решение

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

Пример 1. Растягиваемый фон

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид фона при уменьшенном размере окна

При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).

Рис. 2. Вид фона при увеличенном размере окна

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

Давайте определим, что именно мы хотим получить:

Полная заливка окна картинкой, без пробелов.

Растягивание фоновой картинки, насколько это нужно.

Соответствие пропорций картинки.

Картинка должна находиться в центре.

Это должно быть максимально кроссбраузерно.

И без всяких махинаций с flash.

CSS3 метод

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

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

Opera 10+ (Opera 9.5 поддерживает background-size но не поддерживает ключевых слов)

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

Растянуть background на чистом CSS

Сделать background на весь экран с помощью чистого CSS кода, можно двумя методами. Не исключение что существуют и другие.

1 – Метод

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

Особо хитрая часть кода, это использование медиа запроса, для предотвращения бага, когда окно браузера будет меньше, нежели картинка фона. А также, комбинированное использование отступа с процентным left. Это позволяет держать background в центре, несмотря ни на что.

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

Любые версии популярных браузеров: Safari / Chrome / Opera / Firefox

IE 6: По крайней мере background остается фиксированным

IE 7/8: Множество работ не центрируются на малых размерах, но заполняет экран лучшим образом

2 – Метод

Еще один простой способ реализовать это, вставить картинку на страницу. Она будет иметь фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min- w >height 100%. Также нужно заранее подготовить картинку, в плане пропорциональности сторон.

Хотя, этот код не центрирует background image. Поэтому, сейчас мы это исправим… Мы можем фиксировать картинку с помощью взятия ее в div.

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

Safari / Chrome / Firefox (не тестировалось на более древних версиях)

Opera (любые версии) и IE отображают одинаково (плохо позиционируют, не пойму почему)

Растянуть background с помощью jQuery

Эта идея появилась немного ранее (как альтернатива CSS методу). Если мы будем знать пропорции и размер картинки, мы сможем растянуть background на CSS. Если картинка меньше окна браузера, мы изменим width на 100% для картинки. Если больше, мы можем установить только height 100% и знать, что картинка заполнит все как по ширине, так и по высоте.

Мы можем получить доступ к нужным данным с помощью JavaScript. Как и все, я использую фреймверк jQuery.

Здесь не реализовано центрирование, но вы с легкостью можете сделать это.

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

И все другие популярные браузеры

Растягиваем background с помощью PHP

Собственно, PHP мы можем использовать для одной цели: обработки изображения с помощью GD библиотеки. Ранее я рассказывал о том, как сделать скрипт превью картинок. В этом случае его можно использовать для изменения размера изображения на лету. Но возникает проблема, изображение будет генерироваться при каждом обращении к сайту. Для большого проекта это слишком ресурсоемко. Лучше будет сделать готовые заготовки изображений, соответственно самым популярным разрешениям экранов (1024 x 1280, 1280 x 800…), используя фотошоп это не сложно. В случае, если разрешение экрана будет другим, это единичные случаи, мы подключим скрипт автоматического изменения размера. Он подключается следующим образом:

Наслаждайтесь!

Это все известные мне способы, как растянуть background на весь экран. Если вы делаете это иначе, будьте добры опишите это в комментариях. Буду рад узнать о новых вариантах растягивания background с помощью css и других техник. Творческих вам успехов!

Как задать фоновое изображение в css. Фоновая картинка. Делаем фон с помощью градиента

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

Как растянуть фон на всю ширину окна?

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

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

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

Можно ли сделать анимированный фон?

Мультипликация это достаточно сильный прием, способный оживить любой документ, поэтому не удивительно, что огромную популярность приобрела технология Flash, которая добавляет на веб-страницы мультики, к тому же интерактивные. Графический формат GIF также поддерживает простейшую анимацию путем последовательной смены кадров. Так что используя изображение в этом формате допустимо анимировать не только отдельные картинки, но также фон веб-страницы или определенного элемента.

Вначале потребуется создать анимированную картинку в формате GIF, для чего можно воспользоваться программой Adobe Photoshop или другой подходящей для этой цели. Также существуют библиотеки готовых анимированных файлов, которые можно применять в качестве фоновой картинки. Далее изображение добавляется в качестве фона с помощью стилевого свойства background
, как показано в примере 1.

Как поместить фоновый рисунок в правый нижний угол страницы?

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position
, оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется свойство background-position
со значением no-repeat
.

Как сделать, чтобы фон не повторялся?

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

Как сделать, чтобы фон повторялся только по вертикали?

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

17.10.2015

Пока нет

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и на примерах покажу, как сделать фон
из цвета или картинки в HTML-странице.
Все довольно просто!
Начнем из цвета!
Я думаю, вы не пропустили , там, где я рассказывал, как менять цвет текста и в конце статьи давал коды различных цветов и оттенков. Почему я напомнил вам об этом уроке? Да потому, что там есть таблица с готовыми кодами цветов, берите их и практикуйте сразу в этом уроке.
Итак, как сделать цветовой фон в HTML…

Цветовой фон в HTML

Цвет фона в HTML-документе по умолчанию белый. Как же задать цвет по желанию?
В этом нам поможет атрибут «bgcolor
». Чтобы закрасить задний фон, пропишите этот атрибут к тегу «body
»:

Либо так:

Вот полный HTML-код:

Изменяем цвет фона – сайт
Текст страницы будет зеленый, а фон черным.

Результат будет вот таким:

Если вы хотите сделать фон из картинки, тогда к тегу «body
» пропишите атрибут «baсkground
»:

Залейте любую картинку туда, где лежит ваша веб-страница (на примере у меня страница имеет название «fon
» с расширением «.gif
»):

Вот полный HTML-код:

фона – сайт

Результат будет вот таким:

Если фоновая картинка размещена в папке images
или в какой-то другой папке, это будет выглядеть так:

Вот полный HTML-код:

фона – сайт
Текст страницы на красивом фоне.

На сегодня это все! Я думаю, урок был не сложный и вы все поняли. Если есть вопросы, пишите в комментариях.
Жду вас на следующих уроках.

Предыдущая запись
Следующая запись

Всем привет! На связи с вами ваш покорный слуга с порцией полезного и практического материала на тему как установить фон для сайта. Это самое начало в html верстке и здесь я наглядно продемонстрирую на примере как можно сделать красивый фон для сайта, который однозначно зацепит интернет пользователя и придаст оригинальности.

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

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

Он отображается в списке поисковика Гугл на первом месте поэтому в работе рекомендую именно его. Также вы можете найти большое количество других сайтов если наберете в поисковике примерно такие словосочетания «background image patterns», «download background image for site» и так далее.

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

В этой статье я выбрал тему и называется она tweed. Скачать вы можете ее .

Вот как она выглядит в небольшом варианте на сайте

В начале создаем новый документ в программе

И обязательно перед его редактированием сохраняем под именем, например index.html
и создаем папку на компьютере, например можно создать папку «My site» и уже в нее помещать наш индексный файл (index.html).Лучше создавать папку на английском языке, чтобы не было путаницы у браузера и некорректного отображения сайта.

Помимо этого в главной папке «my site» вам нужно создать еще две подпапки, в одно мы будем помещать все наши картинки и называться она будет «images», а другой дадим название «CSS» (каскадные таблицы стилей) и поместим туда файл style.css

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

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

В теге title можете поменять название документа, например можете сделать «Моя первая веб страница». И убедитесь что ваша страница сохранена в кодировке
UTF
—
8

В противном случае если будет стоять другая кодировка, например windows-1251, то текст документа в браузере будет отображаться иероглифами. Поменять кодировку вы можете в разделе «Кодировки – Кодировать в Utf-8 (без BOM)» на панели инструментов программы.

И не забываем каждое наше действие сохранять.

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

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

Для этого в нашей программе Notepad++ создадим еще один файл и назовем его Style.css и сохраним его в новой папке css, которая будет находиться в общей папке «My site»

Отлично! Чтобы наш браузер правильно отобразил страницу нам необходимо подключить таблицу стилей в наш html документ. Вот как это делается

Прямо целиком вводим всю строку над . Этой строкой мы подключаем нашу таблицу стилей.
Теперь мы для нашего тега body определим фоновую картинку через таблицу стилей. Для этого мы в документе style.css создаем следующую структуру (прямо также берете и пишите в коде программы)

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

BACKGROUND-REPEAT:

REPEAT //(растиражировать по горизонтали и вертикали)
REPEAT-X // (растянуть только по горизонтали)
REPEAT-Y //(растянуть только вертикали)
NO-REPEAT //(не повторять фоновую картинку)

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

Также специально для вас сделал подборку сайтов где вы можете скачать красивый фон для сайта

В HTML изображения вставляются с помощью тега img
.
Тег img
— пустой, он содержит атрибуты и у него нет закрывающего тега.

Для отображения изображения на странице используется атрибут src
. Src
появилось от source, что означает Источник. Значением атрибута src является url-адрес
изображения.

Строка выше означает, что изображение находится в той же директории (папке), что и сам html-файл, ссылающийся на данное изображение. Допустим, у Вас есть папка html
, в которой содержится index.html
с указанным выше кодом и само изображение с названием image.jpg
.

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

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

Атрибуты тега img

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

src
— адрес изображения
width
— ширина изображения
height
— высота изображения
title
— подпись, которая высвечивается при наведении на изображение
alt
— альтернативный текст. Нужен для поискового робота и индексации изображений
border
— толщина границы изображения. 0 — нет границы, 1 — самая тонкая граница и тд

Адрес вставленного изображения (примеры)

Как правило, изображения
хранятся не в той же папке, что и сам html-файл
. Для этого в той же директории создаётся папка images
(или img, тут на вкус и цвет). А в неё уже кладутся все нужные изображения. В случае с отдельным хранением нужно будет прописывать для атрибута src уже другой адрес

Если файл лежит на папку выше, то так

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

Фоновое изображение в HTML

В качестве фонового изображения
могут выступать файлы с расширениями gif
, jpg
, jpeg
и png
. В том случае, если размер изображения меньше окна браузера, то изображение будет автоматически дальше заполнять оставшийся фон. В body
используем атрибут background
, в котором прописываем путь к изображению

2 голоса

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

Я также расскажу о некоторых нюансах, которые позволят сделать фон наиболее ровным и красивым. Ну что ж, начнем?

Выбор картинки

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

К сожалению, растянуть изображение в html на весь экран невозможно. Фото используется в натуральную величину. Если картинка маленькая, то она замостит всю площадь, как на скриншоте внизу. Чтобы растянуть картинку придется создать дополнительный css документ, без этого не получится.

Хотя, у вас есть возможность обойти систему. Для этого используйте фотошоп и картинки до ширины экрана (1280х720). Хотя в этом случае при скроллинге вниз, она картинка будет сменять другую.

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

Если вас интересуют и отсутствие юридических последствий за их использование, то я рекомендую поискать на сайте Pixabay.com

.

Html

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

Итак, вы можете работать в блокноте, я предпочитаю NotePad++. В нем работать гораздо удобнее: код дописывают за тебя, теги подсвечиваются. Программа бесплатная, и весит около 3 Мб. Очень рекомендую, особенно если вы новичок.

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

Можете просто открыть блокнот и скопировать вот этот код. В кавычках поставьте ссылку на ту картинку, которая вам нравится.

Background-image

Хотелось бы отметить для новичков, вот какой момент. Если вы берете изображение с pixabay, то ссылку вставлять нужно не на страницу с картинкой, а открыть рисунок в соседней вкладке.

Копируйте именно этот URL.

Сохраните документ. Не забывайте, что если вы используете блокнот, то нужно использовать расширение .html

. Просто назовите документ, к примеру, back.html

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

Готово, страница залита другим цветом.

Если вы хотите узнать больше о html, я советую вам скачать бесплатный курс Евгения Попова

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

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

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

Не согласны со мной? Могу предложить альтернативу. Книга Элизабет и Эрика Фримен «Изучаем HTML, XHTML и CSS

». Не очень скучный бестселлер и выпустился не так давно, в 2016 году. Информация устареть еще не успела.

CSS

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

CSS помогает решить эту проблему. Вам нужно создать файл с расширением css и ввести следующий код:

Давайте немного поговорим о самом коде. В скобках, после url

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

Для тех, кто хочет знать лучше

При помощи css вы можете растянуть background image
, сделать так, чтобы оно не повторялось, добавить gif-анимацию и многое другое.

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

Хотите научиться правильно писать сайты? Я рекомендую вам изучать языки программирования . Могу посоветовать курс Андрея Бернацкого «HTML5 и CSS3 с Нуля до Профи

». Мне очень нравится этот автор. Я не проходил конкретно этот курс, несколько лет назад было уже что-то аналогичное, но менее современное.

Автор очень приятно рассказывает, все легко и понятно. Изюминка этого курса заключается в том, что вы не просто изучаете, вы создаете конкретный сайт вместе с преподавателем. В результате вы получите визитку, блог и даже интернет-магазин. Очень круто. Можете посмотреть первые три теоретических урока по HTML5 из этого курса прямо здесь и сейчас.

Кстати, вместе с этим курсом вы получаете 7 бонусов: основы html и css Андрея Бернацкого, верстка для начинающих, создание лендинг пейдж за вечер и многое другое. Перед тем как заниматься серьёзным обучением, пощупайте бесплатный курс «Практика HTML5 и CSS3

».

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

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

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

Вот что еще есть по поводу адаптивных изображений для сайта:

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

Как это выглядит смотрите на реальном примере:

Посмотреть примерСкачать

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

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

HTML часть

Для данного примера мы будем задавать фоновое изображение для body, но подобным образом можно сделать для любого блока на странице. Поэтому ничего сверхъестественного в HTML структуре нет:

HTML КОД

1
2
3
4
5
6
7
8
9

<!Doctype html>
<html>
    <head>
        <title>Заголовок страницы</title>
    </head>
    <body>
        <!-- Здесь размещаете контент -->
    </body>
</html>

CSS часть

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

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

body {
    /* Путь к изображению относительно данного файла */
    background-image: url(../images/background-photo.jpg);
 
    /* Центрирование изображения по вертикали и горизонтали всегда */
    background-position: center center;
 
    /* Запрещаем повтор изображения */
    background-repeat: no-repeat;
 
    /* Фиксируем изображение - оно остается на месте при прокрутке окна */
    background-attachment: fixed;
 
    /* Изображение будет масштабироваться в зависимости от размеров контейнера */
    background-size: cover;
 
    /* Цвет фона изображения, который будет показываться пока изображение не загрузится */
    background-color:#464646;
 
    /* Эквивалентная сокращенная запись
    * background: url(background-photo.jpg) center center cover no-repeat fixed;
    */
}

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

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

Будем использовать Media Queries (Медиа запросы), которые позволяют задать отдельные свойства для произвольной ширины экрана:

1
2
3
4
5
6
7
8
9

/* Для мобильных устройств */
@media only screen and (max-width: 767px) {
    body {
        /* Если размер экрана меньше 767px показываем уменьшенное изображение,
        * которое на 77% меньше чем оригинальное для обеспечения быстрой загрузки 
        * на мобильных устройствах */
        background-image: url(../images/background-photo-mobile-devices.jpg);
    }
}

Что мы сделали? Если ширина окна браузера на устройстве будет менее 767 пикселей, то будем использовать другое изображение. Всё очень просто.

Бонус к статьей «Где брать фоновые изображения?»

Как и обещал в начале статьи даю Вам ссылку на очень качественный сервис, где Вы сможете подобрать фоновое изображение для своей продающей страницы. Он находится ЗДЕСЬ.

Вывод

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

Успехов!

С Уважением, Юрий Немец

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

Абсолютно круглые изображения с помощью CSS

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

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

img { width: 200px; height: 200px; border-radius: 50%; }

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

В примере использовал картинку размером 367×268, для вывода на странице определил размер 200×200 и использовал процентное значение для border-radius:. Можно конечно прописать значение и в px, просто делите картинку пополам, прописываете в border-radius:100px и получаете такую же абсолютно круглую картинку.

Использовать данный метод можно где угодно, миниатюры записей, аватары пользователей в комментариях и т.д., главное не переусердствовать и вовремя придержать свою неуёмную фантазию))) В IE8 поддержки свойства border-radius нет, так что пользователи, продолжающие упорно сидеть на этом браузере, увидят идеально квадратные картинки (((.

С Уважением, Андрей

Короткая ссылка →

Как сделать круглую картинку на CSS?

Привет. Многим эта статья может показаться достаточно примитивной, и очевидной. Как сделать круглую картинку на CSS? Для этого не нужно делать ничего особенного, читайте далее.

Под круглой картинкой я понимаю картинку, которая вписана в круг. Есть старые подходы, когда картинка вписывается в круг в Photoshop, или когда поверх картинки накладывается другая картинка в PNG, у которой в центре прозрачный круг (через прозрачный круг просвечивает картинка слоем ниже, и получается круглая картинка).

Но сейчас всё можно сделать гораздо проще и быстрее.

Всё ещё хотите узнать как сделать круглую картинку на CSS?

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

Итак, квадратная картинка. У нас есть такой код на HTML:

Теперь просто добавим к этом коду код на CSS:

img.round_image{ border-radius: 50%; overflow: hidden; }

Готово. Border-radius – это радиус скругления углов. Если border-radius: 50%, то скгругляться угол будет до середины высоты и середины ширины с каждой из сторон. Если картинка квадратная, то border-radius: 50% сделает скругление до середины высоты и ширины с каждой из сторон и образует круг.

overflow: hidden говорит о том, что всё, что не попадает в область видимости объекта должно быть скрыто. То есть то, что выходит за границы объекта (в том числе скругленные углы), будет скрыто. Так мы скрываем квадратные углы, и получаем круглую картинку.

Таким же подходом можно делать любые объекты

круглыми.

Понравилась или помогла статья? Купите мне кофе

Как сделать несколько фоновых изображений CSS

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

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

Множество фоновых изображений

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

Демо

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

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

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

Фоновой рисунок через псевдоэлемент

Также не стоит забывать про альтернативные варианты, как таковыми, являются псевдоэлементы before и after. В их применении есть положительный плюс – изображение можно заносить за край элемента, так чтоб оно не исчезало на границе, а было поверх нее. Такой прием пригодится, если нужно будет сделать что-то вроде 3Д эффекта.

Демо

Пояснение. По сути, все очень просто. Главному элементу обычным путем задаем фон. Дальше идет ключевое свойство position: relative;, которое определяет область для перемещения другого элемента, находящегося в главном элементе и имеющем свойство position:absolute;.

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

Как сделать картинку фоном в html | Советы в Дзен

Здравствуйте, уважаемые

подписчики и гости канала «Советы в Дзен»! В этом уроке мы расскажем, Как сделать картинку фоном в html через CSS.

Это не такая сложная задача, как может показаться. Посмотрев наш видео-урок для начинающих (выше) вы поймете, как можно быстро задать фоновое изображение вашего html документа используя стили CSS.

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

Итак, чтобы сделать картинку фоном в html через css , необходимо сделать следующее:

1. Открываем, или создаем новый html файл. Для этого используем какой-либо текстовый, или html -редактор. Для примера мы воспользуемся Adobe Dreamweaver.
2. Добавлять фоновую картинку мы будем через CSS стили (тег style). Прописываем код страницы, как показано в нашем видео-уроке. Для удобства, код страницы мы разместим внизу статьи.
3. Задаем стиль «телу» нашего сайта (body). Указываем параметры фонового рисунка (background).
4. Вначале задаем адрес нашей картинку, которую мы будем использовать в качестве фонового изображения.
5. Затем указываем, будет ли картинка без повторения (no-repeat), будет ли фон «залит» картинкой полностью (repeat), будет повторяться по горизонтали (repeat-x), или по вертикали (repeat- y)
6. Также, далее мы можем указать отступ нашей фоновой картинки от краев

Код используемый в видео-уроке:

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Название страницы</title>

<style type=»text/css»>

BODY {

background: url(«адрес/картинки.jpg») repeat 10px 10px;

}

</style>

</head>

<body>

</body>

</html>

Подробнее о тегах и их атрибутах мы расскажем в наших новых видео-уроках.

Готово! теперь вы знаете как сделать картинку фоном в html через css.

#html #тег #обучение #урок #картинка #изображение #вставить #код #background #фон

Можно ли обойтись средствами html при задании фона

Как сделать фон на сайте html

Нужно знать, как сделать фон на сайте html. Цвет позволяет привлекательно оформить страницу, он преображает дизайн.

Можно ли обойтись средствами html при задании фона

Как сделать фон сайта картинкой html и можно ли обойтись только этим? Нет. Для этих целей применяются специальные css таблицы (каскадные). Задать бэкграунд таким образом гораздо проще.

Как задать фон через css

Определимся, как сделать фон на сайте. Найдите селектор, к которому нужно привязать фон. Для создания сплошного цвета используется «background-color». Дальше ставится двоеточие, прописать цвет (есть разные способы: форматы, коды).

Картинка в качестве фона

Узнаем, как сделать фон картинкой на сайте. Для вставки изображения применяется «background-image». Для того, чтобы задать рисунок, нужно корректно прописать ключ и url, и прописать путь к файлу в круглых скобках.

Позиция фона

Как сделать фон на сайте html картинкой и определить позицию? Автоматически рисунок находится сверху, в левом углу. Отредактировать его можно в настройках «background-position».

Сокращенная запись

Оригинальный код очень объемный, его можно сократить. Записывать код нужно в такой последовательности:

• фоновый оттенок;
• путь к рисунку;
• повторение;
• позиция.

Если параметр неважен, можно его просто пропустить. Все рекомендуется писать в сокращенном виде. Узнаем, как картинку сделать фоном сайта html и изменить ее размер.

Управляем размером фоновой картинки

Разберемся, как сделать фон на сайте картинкой.

Если цель – не полностью замостить блок картинкой, и она больше размера блока, поступаем так. Если нет варианта просто уменьшить картинку, примените свойство «background-size». С его помощью можно изменить размер любого фона или рисунка.

Полупрозрачный фон с помощью css

Вам стоит знать, как сделать фон картинкой на сайте html. Найдите в настройках инструмент «rgb (17, 255, 34)» — формат для задания цвета. Первое значение – насыщенность, сначала красного, потом зеленого, далее синего. Числовое значение варьируется от «0» до «225». Сам формат идентичен, единственное отличие – добавлен альфа – канал. Здесь обозначение бывает от 0 до 1 («0» — полностью прозрачный фон).

Как задать фон тексту

Чтобы знать, как сделать фон на сайт html 2, нужно прописать его строчному элементу, в котором приведен текст. Для начала необходимо этот самый элемент создать. Специалисты рекомендуют применить для этой цели span.

Больше возможностей в создании и управлении фоном

Мы разобрались, как сделать фон на сайт в html. С появлением css3 появилось много возможностей для создания фона. К примеру, можно делать градиент, множественный фон, повторения. Это облегчает процесс для веб – разработчика. Используя эту программу, можно научиться профессионально делать скругление углов. Ранее для этого использовали большое количество блоков, а сейчас это возможно сделать с применением 1 программы.

Интернет магазин на opencart создание магазина с уникальным шаблоном

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

Joomla профессионал создание расширений для Joomla

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

Практика оптимизации сайта ускорение загрузки вашего сайта в разы

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

Как добавить фон в css

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

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

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

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам

, так и ко всему веб-сайту с помощью тега .

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

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

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

CSS свойства background используются для создания эффектов на заднем фоне страницы.

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

• background-color
• background-image
• background-repeat
• background-position

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента

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

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

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

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

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

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

Попробовать »

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

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

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

Попробовать »

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

это то же самое что и:

Вы также можете использовать в качестве значений пиксели или проценты. Они определяют расстояние от верхнего левого угла окна браузера (или элемента-контейнера). Верхний левый угол соответствует значению 0% 0%.

Фиксация фонового изображения

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

Так как по умолчанию задний фон прокручивается вместе с содержимым, то в качестве примера мы зафиксируем наше фоновое изображение на одном месте с помощью значения fixed:

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

Несколько фоновых изображений

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

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

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

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

Каждый блок 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 самого нижнего слоя фонового изображения.

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

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

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

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

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

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

3. Укладка изображений: свойство background-repeat

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

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

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

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

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

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

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

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

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

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

Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.

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

Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.

Рис. 3. Свойство background-position

Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

Рис. 4. Фоновое изображение по низу блока

Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:

Рис. 5. Задание для блока нескольких фоновых изображений

6. Область рисования: свойство background-clip

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

Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

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

Рис. 6. Свойство background-clip

7. Область расположения фона: свойство background-origin

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

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

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

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

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

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

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

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

Рис. 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 img vs CSS background-image

Итак, вы смотрите на дизайн-композицию с изображением в ней и пытаетесь выбрать между использованием HTML & lt; img & gt; или фоновое изображение CSS.

Сначала вы можете подумать: «Это вообще имеет значение?»

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

Но вы здесь, значит, вы хотите принять осознанное решение .

Вот пошаговый процесс выбора между ними.

Шаг 1. Специальные возможности

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

Например, & lt; img & gt; Теги могут добавлять замещающий текст и атрибут заголовка, которые могут быть выбраны программами чтения с экрана. Это важно не только для конечных пользователей, но и для индексации в результатах поиска Google. Вот выдержка из официального центрального блога Google для веб-мастеров об умном использовании альтернативных атрибутов:

Поскольку робот Googlebot не видит изображения напрямую, мы обычно сосредотачиваемся на информации, представленной в атрибуте alt.Не стесняйтесь дополнять атрибут «alt» словом «title» и другими атрибутами, если они представляют ценность для ваших пользователей!

Хотите доступности и лучшего SEO? Используйте & lt; img & gt; тег.

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

Шаг 2. Фоновое изображение CSS и производительность

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

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

с & lt; img & gt; , запросы выполняются по мере анализа HTML, поэтому любой контент, предшествующий тегу в документе, будет информацией, которую пользователи могут начать читать.

Кроме того, встроенные изображения ( & lt; img & gt; или & lt; picture & gt; ) могут использовать такие инструменты, как заливка изображений и отложенная загрузка, для еще большего повышения производительности.

Шаг 3. Возможности CSS манипулирования фоновым изображением

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

Фоновые изображения могут использоваться вместе с background-color , background-repeat , background-attachment , background-position и background-blend-mode .Это открывает множество возможностей, если возникнет необходимость в манипуляциях.

Если вы накладываете текст поверх изображения, гораздо проще создать прототип с фоновым изображением CSS.

Заключение

HTML & lt; img & gt; Теги должны использоваться для обеспечения доступности и SEO. В противном случае подумайте о скорости, производительности и манипуляциях, когда изображение является чисто визуальным улучшением дизайна.

Оптимизация фоновых изображений CSS для Интернета.Руководство по оптимизации баннеров HERO | Дмитрий Покидов | pixboost

Все примеры из этой статьи доступны на моем демонстрационном веб-сайте: www.midday.coffee

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

Шаг 1. Разметка для примера ниже довольно проста и понятна. Мы создаем элемент