Как сверстать прямоугольные блоки с общим фоном

#html #css #вёрстка #изображения

У меня есть вертикальная панель блоков / кнопок.

Я хочу сделать так что бы у них был общий фон, как это можно сделать?



Исходная картинка


    

Ответы

Ответ 1

Тут банально используется background-attachment: fixed на картинках.



.image-fixed {
    width: 200px;
    height: 70px;
    margin: 15px;
    border: 5px solid black;
    background-image: url(https://i.stack.imgur.com/kO1xf.jpg);
    background-attachment: fixed;
    background-size: 70%;
    background-position: -8px 2px;
    border-radius: 11px;
    text-align: center;
    font-size: 35px;
    color: white;
}

#common {
  background: blue;  
}

  
text
  
text
  
text
  content content content content  

  content content content content  

  content content content content  

  content content content content  

  content content content content  

  content content content content  

  content content content content  

  content content content content  

  content content content content  






Недостаток тут очевиден - при скролле картинка остается на месте. Какие хаки применить,
причем без использования Javascript, чтобы блок дивов двигался вместе с картинкой -
я пока не знаю


Ответ 2

.box {
  background-color: #dddddd;
  width: 50%;
  padding: 15px;
  margin: 0 auto;
}

.wrap {
  background: url('https://i.stack.imgur.com/kO1xf.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.btn {
  position: relative;
  border: 1px solid black;
  padding: 10px;
  display: block;
  margin-bottom: 10px;
  color: #ffffff;
}

.btn::after {
  position: absolute;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: '';
  bottom: -11px;
  left: -1px;
  width: 100%;
  height: 10px;
  background-color: #dddddd;
}

  

    Кнопка
    Кнопка
    Кнопка
    Кнопка
  





Вот но на мой взгляд костыли