如何让我的背景gif适合页面?

时间:2018-04-12 23:47:29

标签: html css

当我尝试使用背景大小封面规则时,我的网页底部仍然有一个空格,gif拒绝覆盖。这只是一个销售朋友定制打火机的简单网站。当我调整页面的大小时,gif会缩放,但不会如此。我应该为html或正文添加最大高度?有什么建议吗?



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>
&#13;
&#13;
&#13;

0 个答案:

没有答案