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

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

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

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

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

Как поместить элемент 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

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

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

как убрать картинку на задний план

а нужно вот так

Можно ли на задний план поставить те две ленточки. (есть слои этих ленточек).

Ссылка на комментарий

Поделиться на других сайтах

Больше способов поделиться.

6 ответов на этот вопрос

• Сортировать по голосам
• Сортировать по дате

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Больше способов поделиться.

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

Не могу расположить второй ряд картинок все div идут в одну строчку. Пробовал и команду clear (both, left) всем блокам прописан float:left.(Всё в конце кода). Заранее спасибо за помощь.На всякий случай прикреплю ещё картинки.
index.html
style.css

Здравствуйте! Есть небольшая проблема: имеется блок, в который вставляем строчные гиперссылки с изображениями внутри. Обнаружил, что в данном блоке появляется странный отступ снизу (зеленного цвета), от которого я не могу избавиться. Так как я новичок, то прошу помощи. Визуально проблему можно посмотреть здесь: https://jsfiddle.net. Проблема плевая, но я застрял . Заранее благодарю!

Такая конструкция работает нормально

Помогите пожалуйста, мне надо, чтобы текст отображался внизу картинки БЕЗ ОТСТУПОВ, сразу после картинки.

Как сдвинуть background image css

Для определения позиции изображения относительно родительского блока, используется свойство background-position. У данного свойства есть два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Вместо использования ключевых слов, положение можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

• top left = left top = 0% 0% (в левом верхнем углу)
• top = top center = center top = 50% 0% (по центру вверху)
• left = left center = center left = 0% 50% (по левому краю и по центру)
• bottom right = right bottom = 100% 100% (в правом нижнем углу)

body  /* путь до изображения*/ background-image: url(path_to_my_image.jpeg), /* позиционирование */ background-position: right bottom; >