Как сделать фоновое изображение заполнить div и отзывчивым - PullRequest
Новая
       7

Как сделать фоновое изображение заполнить div и отзывчивым

0 голосов
/ 15 января 2019

Я хочу сделать div с фоновым изображением, а вверху появятся 3 иконки социальных сетей, например:

Что я хотел: what i wanted

div#second-footer-container {
  background-image: url("https://i.imgur.com/0qRwdSI.png");
  width: 100% !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100%;
}

p#socmed-container {
  text-align: center;
}

p#socmed-container a {
  padding: 0 5px !important;
}
<div id="second-footer-container">
  <p id="socmed-container">
    <a href="https://www.facebook.com/test/">
      <img id="fb-img" width="25" src="https://i.imgur.com/6ye5lwf.png" alt="Facebook" />
    </a>
    <a href="https://www.instagram.com/test/">
      <img id="ig-img" width="25" src="https://i.imgur.com/SEsRzFL.png" alt="Instagram" />
    </a>
    <a href="https://www.twitter.com/test/">
      <img id="twitter-img" width="25" src="https://i.imgur.com/y8o23cc.png" alt="Twitter" />
    </a>
  </p>
</div>

Но результат не похож на то, что я хотел, мой результат - фон, кажется, только соответствует высоте основного контента: result

Мне нужна ширина 100%, а высота также равна 100%, и я хочу, чтобы она была отзывчивой

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Может быть, это то, что вам нужно: 

#second-footer-container{
  background-image: url("https://i.imgur.com/0qRwdSI.png");
  width: 100% !important;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  min-height: 200px;
}
#socmed-container{
  text-align: center;
}
#socmed-container a{
  padding: 0 5px !important;
}
<div id="second-footer-container">
  <p id="socmed-container">
    <a href="https://www.facebook.com/test/">
      <img id="fb-img"
           width="25"
           src="https://i.imgur.com/6ye5lwf.png"
           alt="Facebook"
       />
    </a>
    <a href="https://www.instagram.com/test/">
      <img id="ig-img"
           width="25"
           src="https://i.imgur.com/SEsRzFL.png"
           alt="Instagram"
       />
    </a>
    <a href="https://www.twitter.com/test/">
      <img id="twitter-img"
           width="25"
           src="https://i.imgur.com/y8o23cc.png"
           alt="Twitter"
       />
    </a>
  </p>
</div>
0 голосов
/ 15 января 2019

Использование background-size:contain

Максимальное масштабирование изображения без обрезки или растяжения изображения.

background-size - ссылка 

body,html{
  height: 100%;
}
div#second-footer-container {
  background-image: url("https://i.imgur.com/0qRwdSI.png");
  width: 100% !important;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
}

p#socmed-container {
  text-align: center;
}

p#socmed-container a {
  padding: 0 5px !important;
}
<div id="second-footer-container">
  <p id="socmed-container">
    <a href="https://www.facebook.com/test/">
      <img id="fb-img" width="25" src="https://i.imgur.com/6ye5lwf.png" alt="Facebook" />
    </a>
    <a href="https://www.instagram.com/test/">
      <img id="ig-img" width="25" src="https://i.imgur.com/SEsRzFL.png" alt="Instagram" />
    </a>
    <a href="https://www.twitter.com/test/">
      <img id="twitter-img" width="25" src="https://i.imgur.com/y8o23cc.png" alt="Twitter" />
    </a>
  </p>
</div>
...