Как поместить элемент css на задний план?

По идее, элемент head_bg_img должен быть на заднем фоне, но он перекрывает остальные два. Пробовал применять также и z-index но иэто не увенчалось успехом. Как быть?

Отслеживать
задан 4 окт 2016 в 14:58
461 2 2 золотых знака 8 8 серебряных знаков 21 21 бронзовый знак

2 ответа 2

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

.head < width: 600px; height: 200px; overflow: hide; >.name, .head_info < position: relative; float: left; >.head_bg_img

 
   
Информация о компании
 
Имя компании
 

Отслеживать
ответ дан 4 окт 2016 в 15:05
Dmytro Kondratiuk Dmytro Kondratiuk
2,126 1 1 золотой знак 9 9 серебряных знаков 13 13 бронзовых знаков

У кого-то должен быть position: absolute;

.name, .head_info < position: absolute; z-index: 2; top: 0; left: 0; right: 0; float: left; >.head_bg_img

 
  
Информация о компании
 
Имя компании
 

Либо отрицательный margin :

.name, .head_info < position: relative; top: -250px; float: left; >.head_bg_img

 
  
Информация о компании
 
Имя компании
 

Но ничего не перекрывается.

Как поставить эту картину на задний план и не сломать все?

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

 
 
 
 
 
Лучшая дизайнерская фурнитура для дома
 
Подробнее 
 
 
 
 
 
 
 
 
 
 

.container < color: #0f0a00; max-width: 1170px; margin: 0 auto; padding: 0px 15px; font-family: 'Montserrat', sans-serif; >.chair < background-color: #f5f8f1; overflow: hidden; >.chair__inner < display: flex; justify-content: space-between; >.chair__wave < display: flex; margin-top: 450px; >.chair__img < padding-top: 90px; padding-right: 107px; >.chair__title < padding-top: 168px; font-size: 48px; min-width: 475px; font-weight: 600; color: #0f0a00; >.chair__word < background-color: #edce47; padding: 0px 8px; >.chair__button < background-color: #edce47; padding: 21px 0px; padding-left: 55px; font-size: 16px; font-weight: 600; min-width: 165px; position: absolute; margin-top: 305px; >.chair__arrow < padding: 0px 42px 0px 14px; >.chair__bgimg

• Вопрос задан более трёх лет назад
• 656 просмотров

3 комментария

Средний 3 комментария

Фон в CSS (background-color, background-image)

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

Тише, мыши, кот на крыше

Результат будет такой:

Тише, мыши, кот на крыше

Картинка в качестве фона (background-image)

Помимо заливки области цветом, возможно поставить картинку на задний фон. Для этого необходимо использовать CSS свойство background-image.

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

Картинка в качестве фона (background-repeat)

• no-repeat — не повторять картинку ни по горизонтали, ни по вертикали
• repeat — повторять картинку во всех направлениях
• repeat-x — повторять картинку только по горизонтали
• repeat-y — повторять картинку только по вертикали

Получится так:

Позиция (background-position)

• top — вверу
• bottom — внизу
• right — справа
• left — слева
• center — по центру

z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index . Это свойство работает только для элементов, у которых значение position задано как absolute , fixed или relative .

Синтаксис

z-index: число | auto | inherit

Значения

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index , на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index , но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

     #layer1, #layer2, #layer3, #layer4 < position: relative; /* Относительное позиционирование */ >#layer1, #layer3 < font-size: 50px; /* Размер шрифта в пикселах */ color: #000080; /* Синий цвет текста */ >#layer2, #layer4 < top: -55px; /* Сдвигаем текст вверх */ left: 5px; /* Сдвигаем текст вправо */ color: #ffa500; /* Оранжевый цвет текста */ font-size:70px; /* Размер шрифта в пикселах */ >#layer1 < z-index: 2; >#layer2 < z-index: 1; >#layer3 < z-index: 3; >#layer4 
Слой 1 наверху
 
 
Слой 4 наверху
 
 
 

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

Рис. 1. Применение свойства z-index

Объектная модель

[window.]document.getElementById(» elementID «).style.zIndex

Браузеры

Список, созданный с помощью тега , в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует auto как 0.

В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.