Как я могу увеличить размер фона изображения без добавления большого количества контента?

Question

Я пытаюсь добавить фоновое изображение на фон, я могу это сделать, но он не показывает полный размер изображения, которое я использовал этот код. Когда я пытаюсь использовать авто в качестве фона, то получаю правильную ширину, но высота небольшая, я знаю, что это зависит от размера контента. но все же есть ли способ

<div style="background: url('https://firebasestorage.googleapis.com/v0/b/growthfilepractice.appspot.com/o/1%20(2).jpg?alt=media&token=48244df9-a2bb-412a-81f5-854e2dbc4939');background-repeat: no-repeat;background-size:500px 500px;">
  <a href ="https://github.com/" style="text-decoration: none;">

    <table>
      <tr>
        <td><h3 style="color: #fff;">Amarjeet Singh</h3></td>
      </tr>
      <tr>

      </tr>
    </table>


  </a>
</div>

Answer 1

Предлагаю вам установить background-size: cover. Это автоматически установит полный размер, если вы этого хотите.

Answer 2

Изображение устанавливается в качестве фона вашего <div>, поэтому его размер будет зависеть от width и height этого <div>. Так что, если высота была больше, то будет показано больше background-image. Просто чтобы проиллюстрировать, проверьте мой код ниже. Я дал <div> a height : 600px, и изображение теперь показывает для этой высоты.

Итак, короче говоря, ваше фоновое изображение показывает только размер вашего элемента. чем больше становится ваш элемент, тем больше будет изображения.

<div  class="container" 
      style=" height: 600px; /* Just to illustrate */
              position: relative;
              background: url('https://firebasestorage.googleapis.com/v0/b/growthfilepractice.appspot.com/o/1%20(2).jpg?alt=media&token=48244df9-a2bb-412a-81f5-854e2dbc4939');
              background-repeat: no-repeat;
            background-size:500px 500px;">
  <a  class="nameAnchor" 
      href ="https://github.com/" 
      style=" text-decoration: none;
              position: absolute;
              color: white;
              left: 10px; /* Set your Left position here */
              top: 100px; /* set your top position here */
  ">
    <span>Amarjeet Singh</span>
  </a>
</div>