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

Question

I am trying to add the background image on the background i am able to do it but it doesn't show the full size of the image i have used this code. when i am trying to use background-size auto then i am getting the width right but height is small i know it depends on the content size. but still is there any way

<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

The image is set as the background of your <div> so it's size will depend on the width and height of that <div>. So if the height was larger then more of the background-image will be show. Just to illustrate, check my code below. I have given <div> a height : 600px and the image now shows for that height.

So, in short, your background image only shows for the size of your element. the larger your element becomes the more of the image will appear.

<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>