如何在不添加太多内容的情况下增加图像的背景大小？

Question

我正在尝试在背景上添加背景图像我可以做到，但它没有显示我使用此代码的图像的完整尺寸。当我尝试使用 background-size auto 时，我得到的宽度是正确的，但高度很小，我知道这取决于内容的大小。但还是有办法

<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

图像设置为您的 <div> 的背景，因此它的大小将取决于 <div> 的 width 和 height。因此，如果高度较大，则会显示更多 background-image。只是为了说明，请检查下面的代码。我已经给 <div> 一个 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>

Answer 2

我建议你设置背景大小：封面。这将自动将其设置为完整大小，如果这是您想要的。

如何在不添加太多内容的情况下增加图像的背景大小？

How can i increase the background size of the image without adding much content?

html

css

amazon-ses