Question

我试图让这个背景图像适合浏览器窗口的宽度，而不是水平滚动。因此，我也遇到了将页面上的所有内容集中在一起的问题。不幸的是，这个问题在我最近的项目中不断出现，我已经尝试了所有我能想到的解决方案。

我的代码，图像大小是否有问题，我错过了什么？

＆＃13;

body {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
}


.main-nav {
	display: none;
	font-family: 'Yantramanav', sans-serif;
}

.logo {
	color: #fff;
	font-family: 'Yantramanav', sans-serif;
	position: absolute;
	top: 70;
	left: 15;
	font-size: .5em;
}

.promo {
	position: fixed;
	top: 0;
	z-index: 99;
	padding: 10px;
	width: 100%;
	height: 60px;
	background-color: #000;
	color: #fff;
	font-size: .7em;
	text-align: center;
}


.welcome {
	color: #fff;
	font-family: 'Yantramanav', sans-serif;
	background-color: lightgrey;
	background: 
	linear-gradient(#303030, transparent 90%),
	url('../imgs/camerabg.jpg') no-repeat center;
	background-size: cover;
	height: 100%;
	width: 100%;
	text-align: center;
	margin-top: -10px;
	padding: 200px;
} 

.welcome h1 {
	font-size: 2em;
}

.welcome a {
	text-decoration-style: underline;
	color: lightgrey;
	font-size: 2em;
	display: inline-block;
}

.welcome ul {
	list-style-type: none;
}

.location {
	font-size: 1.5em;
	margin-top: 10px;
	padding: 10px;
	border: 2px solid lightgrey;
	color: lightgrey;
}

.products {
	font-family: 'Raleway', sans-serif;
	height: 150px;
	width: 100%;
	background-color: #000;
	background: linear-gradient(#181818, transparent 90%),
	url('../imgs/oldcamera.jpg') no-repeat center;
	background-size: cover;
	color: #fff;
	text-align: center;
	padding: 150px;
	margin-bottom: 40px;
}

 .products h1 {
 	font-size: 3em;
 }

 .products a {
 	padding: 10px;
 	border: 2px solid lightgrey;
 	color: lightgrey;
 	font-size: 2em;
 }

 /*===============================
 			Intro
==============================*/

.intro1, .intro2 p {
	font-family: 'Yantramanav', sans-serif;
}

.intro1, .intro2 span {
	font-family: 'Yantramanav', sans-serif;
}

＆＃13;

<DOCTYPE! html>
<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<link href="https://fonts.googleapis.com/css?family=Raleway|Yantramanav" rel="stylesheet">
	<link rel="stylesheet" href="styles/stylesheet.css">
	<title>TITLE HERE</title>
</head>

<body>

<header>
<div class="promo">
	<p>BUY 1 GET 1 Free 1/2 OFF CLOCK FRAME COMBOS<br>
	*Offer Valid 5/1/18. May not be combined with another offer or promotion. While supplies last.*<p>
</div>

<div class="logo">
<h1> Name Here</h1>
</div>

<div class="main-nav">
	<ul>
		<a href="#"><li>Home</li></a>
		<a href="#"><li>About</li></a>
		<a href="#"><li>Blog</li></a>
		<a href="#"><li> Hire Us</li></a>
	</ul>
</div>

<div class="welcome">
	<h1>Welcome To Our New Site</h1>
	<p>Let us help you with your best moments.</p>
	<ul>
	<li><a href="#">Order Now</a></li>
	<li><a class="location" href="#">Find Our New Location</a></li>
</ul>
</div>
</header>

<div class="intro1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
</div>


</body>
</html>

＆＃13;

为什么背景图片会滚动？

0 个答案: