9

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

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

введите сюда описание изображения

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

введите сюда описание изображения

4
  • 2
    просьба к читающим вопрос: перед тем, как бросаться минусовать вопрос ознакомиться с темой на мете про вопросы-картинки и поглядеть изначальный вопрос, с которого началась эта тема. Это НЕ учебный вопрос, это попытка написать эталонную закрывашку
    – A K
    18 дек 2017 в 20:55
  • а при скролле по вертикали и горизонтали фон должен с кнопками двигаться или на месте быть? потому что может зависеть решение... если все же сохранять положение на них свое - то скорее всего без js никак (за исключением варианта подгонки изображения по position) 18 дек 2017 в 21:33
  • @АлексейШиманский оба варианта, или любой из них будет интересен. Что бы было без JavaScript не обязательно, принимаются все решения. 18 дек 2017 в 21:36
  • Если не прокручивая страницу, background-attachment: fixed; для кнопок, наверное, подойдет... 18 дек 2017 в 21:45

2 ответа 2

7

Тут банально используется 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;  
}
<div id="common">
  <div class="image-fixed">text</div>
  <div class="image-fixed">text</div>
  <div class="image-fixed">text</div>
  content content content content  <br/>
  content content content content  <br/>
  content content content content  <br/>
  content content content content  <br/>
  content content content content  <br/>
  content content content content  <br/>
  content content content content  <br/>
  content content content content  <br/>
  content content content content  <br/>
</div>

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

2
  • Кстати, что интересно, что при расположении вертикального меню fixed работать будет как надо, а это достаточно частая ситуация. И самое интересное что в моей задачи как раз такой случай )) 19 дек 2017 в 9:54
  • @ДмитрийПолянин ну да, отдельным блоком - вполне сработает. Но если рассматривать как универсальщину - то увы 19 дек 2017 в 10:22
3

.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;
}
<div class="box">
  <div class="wrap">
    <a href="" class="btn">Кнопка</a>
    <a href="" class="btn">Кнопка</a>
    <a href="" class="btn">Кнопка</a>
    <a href="" class="btn">Кнопка</a>
  </div>
</div>

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

3
  • список костылей стоит добавить в ответ
    – A K
    18 дек 2017 в 22:04
  • Прикольно будет если окажется, что задник может быть не монотонный :) 18 дек 2017 в 22:57
  • Интересное решение, правда скруглённых углов тут не сделать как я понимаю. 19 дек 2017 в 9:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.