0

When i try to use the background size cover rule, the bottom of my web page still has a white space where the gif refuses to cover. this is just a simple website to sell a friends custom lighters. also when i resize the page the gif scales but not how its supposed to. should i add a max height to the html or body? any suggestions?

body {
 background: white;
 background-image: url(https://78.media.tumblr.com/aed7e970ec7b37b7202aca3354d3b00f/tumblr_n14btdzOKu1r2nfs5o1_500.gif);
 background-repeat: no-repeat;
 background-size: cover;
    display: flex;
 margin: 0;
 padding: 0;
}


#product {
 position: absolute;
 top: 350px;
 left:290px;
 max-height: 100%;
 max-width: 100%;
 display: flex;
 justify-content: space-evenly;
 padding: 20px;
}
#product img {
 max-width:100%;
 max-height: 100%;
}

.add-to-cart{
 border: red 1px solid;
 
}
<!DOCTYPE html>

<html>
<head>
 <title>Vinyl Stick</title>
 <meta charset="utf-8">
 <link href="style.css" rel="stylesheet" type="text/css">
 <meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>

<body>
    
 

 <div id="product">
  <div id="lighter-bundle-container">
   <div class="lighter-1">
    <a href="#"><img alt="img" src="lighter.png"></a>
   </div>

  </div>
  


  

 
   
  

  <div id="lighter-bundle-container">
   <div class="lighter-2">
    <a href="#"><img alt="img" src="lighter.png"></a>
   </div>
  </div>


  


  
  

  <div id="lighter-bundle-container">
   <div class="lighter-3">
    <a href="#"><img alt="img" src="lighter.png"></a>
   </div>
  </div>


 </div>
 

 <div class="add-to-cart">

   <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="7MS2CP7NYCUJ4">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
   </form>
      
 </div>




    
</body>
</html>
chasehammett
  • 1

0 Answers0