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 that you have read and understand our privacy policy and code of conduct.

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