Установить фоновое изображение на элемент div с динамической шириной - PullRequest
Новая
       5

Установить фоновое изображение на элемент div с динамической шириной

0 голосов
/ 26 апреля 2018

Как подогнать div к 100% его контейнера и сохранить то же фоновое изображение, если мы указали background-position для этого изображения?

CSS 

#content {
    position: relative;
    max-width: 50%;
    height: 0;
    padding: 0 0 50% 0;
}
.icon-1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%; 
   background: url( "/path/to/my/image.png" ) no-repeat -50px -50px;
  /*
  -50px -50px is corresponding to letter "D" in the image
  */
 }

HTML 

<div id='content'>
   <div class='icon-1'>
   </div>
</div>

Идея состоит в том, чтобы использовать один файл для некоторых пиктограмм (для визуального представления каждой категории покупок) 

#content {
    position: relative;
    max-width: 50%;
    height: 0;
    margin: 0 auto 0 auto;
    padding: 0 0 50% 0;
}
.icon-1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%; 
   background: url( "https://i.stack.imgur.com/4FzW2.png" ) no-repeat -50px -50px #aa0000;
  /*
  -50px -50px is corresponding to letter "D" in the image
  */
 }
<div id='content'>
   <div class='icon-1'>
   </div>
</div>

test image

1 Ответ

0 голосов
/ 26 апреля 2018

Вам просто нужно настроить значение фона.В вашем случае это должно быть в 2 раза больше размера красного поля, затем отрегулируйте положение вниз / вправо, чтобы иметь D и вверху / влево для A и так далее: 

#content {
  position: relative;
  max-width: 50%;
  height: 0;
  margin: 0 auto 0 auto;
  padding: 0 0 50% 0;
}

.icon-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://i.stack.imgur.com/4FzW2.png") bottom right/200% 200% no-repeat;
}
<div id='content'>
  <div class='icon-1'>
  </div>
</div>
...