CSS Header Stretch -我做错了什么？
CSS Header Stretch -我做错了什么？
提问于 2016-12-11 12:28:10
我正在尝试处理CSS。希望有页眉拉伸的背景图像来填充页面的宽度。
我已经尝试过background-size: cover;，但它似乎不起作用。
我做错了什么？
Codepen：http://codepen.io/jacobdw/pen/mOjozZ
HTML：
<DOCTYPE! HTML>
<html>
<head>
<title>Development Resources</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
</head>
<body>
<header>
<h1>Development Resources</h1>
</header>
<section class="container">
<article>
<h2>News/Blogs</h2>
<h3>Web Design</h3>
<ul>
<li><a href="http://www.webdesignerdepot.com/">Web Designer Depot</a></li>
<li><a href="http://www.instantshift.com/">Instant Shift</a></li>
<li><a href="http://www.hongkiat.com/blog/">Hong Kiat</a></li>
<li><a href="https://www.smashingmagazine.com/" title="e.g. 'Information about the company ...">Smashing Magazine</a></li>
<li><a href="http://www.vandelaydesign.com">Vandelay Design</a></li>
<li><a href="http://thenextweb.com/">The Next Web</a></li>
<li><a href="https://speckyboy.com/">Speckyboy</a></li>
</ul>
</article>
<article>
<h2>Courses</h2>
<ul>
<li><a href="https://www.lynda.com/">Lynda</a></li>
<li><a href="https://dash.generalassemb.ly/">Dash | General Assembly</a></li>
<li><a href="https://www.freecodecamp.com">FreeCodeCamp</a></li>
<li><a href="https://www.codecademy.com/">Code Academy</a></li>
</ul>
</article>
<article>
<h2>References</h2>
<h3>General</h3>
<ul>
<li><a href="https://developer.mozilla.org/">MDN</a></li>
<li><a href="http://www.w3schools.com/">w3schools</a></li>
<li><a href="http://jgthms.com/web-design-in-4-minutes/">Web Design in 4 Minutes</a></li>
</ul>
<h3>HTML</h3>
<ul>
<li><a href="https://css-tricks.com/examples/CleanCode/Beautiful-HTML.png">What Beautiful HTML Looks Like</a></li>
</ul>
<h3>CSS</h3>
<ul>
<li><a href="http://www.w3schools.com/css/default.asp">W3 Schools CSS</a></li>
<li><a href="https://css-tricks.com/">CSS-Tricks</li>
<li><a href="http://www.dustindiaz.com/css-shorthand/">CSS Shorthand</a></li>
<li><a href="http://css.maxdesign.com.au/listamatic/">Listamatic</a></li>
<li><a href="http://www.noupe.com/essentials/freebies-tools-templates/css-typography-contrast-techniques-tutorials-and-best-practices.html">CSS Typography Contrast Techniques</a></li>
<li><a href="http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php">CSS Navigation Techniques Showcase</a></li>
<li><a href="http://odyniec.net/articles/turning-lists-into-trees/">Turning Lists into Trees</a></li>
<li><a href="http://alistapart.com/article/multicolumnlists">Multi-column Lists</a></li>
<li><a href="https://3.7designs.co/blog/2008/06/10-examples-of-beautiful-css-typography-and-how-they-did-it/">10 Examples of Beautiful CSS Typography</a></li>
<li><a href="https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/">CSS Specificity Things You Should Know</a></li>
</ul>
</article>
<article>
<h2>Tips</h2>
<h3>CSS</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS">Writing Efficient CSS</a></li>
<li><a href="http://www.webdesignerdepot.com/2009/05/10-best-css-practices-to-improve-your-code/">10 Best CSS Practices to Improve Your Code</a></li>
<li><a href="https://code.tutsplus.com/tutorials/5-ways-to-instantly-write-better-css--net-3003">5 Ways to Instantly Write Better CSS</a></li>
<li><a href="http://erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css">5 Tips for Organising Your CSS</a></li>
<li><a href="https://www.smashingmagazine.com/2008/05/improving-code-readability-with-css-styleguides/">Improving Code Readability with CSS Style Guides</a></li>
<li><a href="http://webdesignerwall.com/tutorials/typographic-contrast-flow">Typography Contrast</a></li>
<li><a href="http://designreviver.com/tips/13-training-principles-of-css-everyone-should-know/">13 Training Principles of CSS Everyone Should Know</a></li>
</ul>
</article>
<article>
<h2>Tools</h2>
<h3>CSS</h3>
<ul>
<li><a href="http://www.cssmatic.com/">CSSMatic</a></li>
<li><a href="http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/">List-o-matic</a></li>
</ul>
</article>
<article>
<h2>Other</h2>
<h3>Code Editors</h3>
<ul>
<li><a href="https://github.com/">Github</a></li>
<li><a href="https://codepen.io/">Codepen</a></li>
<li><a href="https://jsfiddle.net/">JSFiddle</a></li>
</ul>
<h3>Communities</h3>
<ul>
<li><a href="http://stackoverflow.com/">Stackoverflow</a></li>
</ul>
</article>
</section>
</body>
</html>CSS：
header {
background-color: #263d36;
background-image: url("https://static.pexels.com/photos/90807/pexels-photo-90807.jpeg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
line-height: 1.2;
padding: 10vw 2em;
text-align: center;
margin-bottom: 50px;
}
header h1 {
color: white;
background: black;
padding: 50px 10px;
}
body {
color: #555;
font-family: 'Space Mono', monospace;
line-height: 1.5em;
margin: 0 auto;
width: 920px;
padding: 30px 20px;
}
h1, h2, strong {
color: #333;
}
a {
color: firebrick
}
ul {
border-left: 1px solid #555;
list-style-type: none;
margin-left: -20px;
}回答 3
Stack Overflow用户
发布于 2016-12-11 12:39:27
将宽度从你的身体上移除或将其设置为自动，如下所示：
body {
color: #555;
font-family: 'Space Mono', monospace;
line-height: 1.5em;
margin: 0 auto;
width: auto;
padding: 30px 20px;
}如果您希望内容的位置与之前相同，请尝试添加：
.container {
width: 920px;
margin: 0 auto;
}Stack Overflow用户
发布于 2016-12-11 12:33:17
你已经给了正文填充和宽度，去掉它：
body {
color: #555;
font-family: 'Space Mono', monospace;
line-height: 1.5em;
margin: 0 auto;
width: 920px; /* remove this */
padding: 30px 20px;/* make this 0px */
}给CodePen的另一个提示：
在你的超文本标记语言部分，你只需要在超文本标记语言的body标签中写下你想要的东西，而不是整个超文本标记语言。
Stack Overflow用户
发布于 2016-12-11 12:36:40
你必须裁剪下一个风格：
margin: 0 auto;
width: 920px;
padding: 30px 20px;并将其应用于容器类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41083001
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号