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

Как добавить на фон HTML документа картинку?

Мне кажется, в любом случае будет необходимо добавить стили. Если не создавать отдельный .css файл, то можно в добавить стили инлайново:

 Some HTML

Отслеживать
ответ дан 9 апр 2020 в 12:20
Jessy Blue Jessy Blue
1 2 2 бронзовых знака

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как добавить два фона к одному элементу через CSS3?

Добавить два фоновых изображения для блока с помощью CSS3.

Решение

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

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

Рис. 1. Фоновая картинка для границы слева

Рис. 2. Фоновая картинка для границы справа

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

Пример 1. Два фоновых изображения

HTML5 CSS3 IE Cr Op Sa Fx

    Два фоновых изображения

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

Вид блока с двумя фоновыми картинками

Рис. 3. Вид блока с двумя фоновыми картинками

Цвет фона

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега .

Пример 1. Изменение цвета фона

    Цвет фона  .

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

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

Пример 2. Добавление фонового рисунка

    Фоновый рисунок  .

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

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

Пример 3. Использование фонового рисунка и цвета фона

    Цвет фона  .

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties =» fixed » тега .

Пример 4. Задание фиксированного фона

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Наложение полупрозрачного цвета на background-image

Как на картинку наложить цвет с прозрачностью в 0.3 (например, красный) на background-image: url(); ?

Отслеживать
16.6k 8 8 золотых знаков 26 26 серебряных знаков 56 56 бронзовых знаков
задан 6 ноя 2014 в 13:25
176 2 2 золотых знака 5 5 серебряных знаков 19 19 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Ответ от @ДмитрийВасильевич был верный, но нужно поменять местами градиент и фоновое изображение:

background-image: linear-gradient(to top, rgba(255,0,0,0.3), rgba(255,0,0,0.3)), url(http://vmeste.eu/fun/1142791216.jpg);

Изображение идущее в коде выше перекрывает изображение идущее ниже.

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

background-repeat: no-repeat, no-repeat; background-size: cover, contain;