【发布时间】：2015-08-04 20:59:22
【问题描述】：
下午好！我需要一些 CSS 帮助。
我有一个背景图片，希望以网站正文为中心。我希望它看起来不错，不要太夸张或太小。到目前为止，这是我尝试过的。
body{
background-color: #1e1e1e;
padding: 20px 0 20px 0;
}
#container{
max-width: 780px;
background: url('/img/background2.png') #1e1e1e no-repeat 0px 12px fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #d1d1d1;
}
它几乎可以工作。当浏览器窗口全屏时，背景图像似乎向左拉。当浏览器窗口较小时，它非常适合。在像我的 MotoX 这样使用 chorme 的手机上，它被炸得非常大，而不是看起来合理的比例。
background-size: contain; 离我想要的结果更远。
这是 ref 的 HTML。我也把它扔到我的服务器上http://jasontolhurst.com
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jason Tolhurst</title>
</head>
<body>
<div id="container" class="container-fluid">
<header class="header clearfix">
<div class="container-fluid">
<ul class="list-inline pull-right">
<li>
<a target="_blank" href="http://stackoverflow.com/users/4490365/squeegy"><img style="max-width:23px" src="/img/stackoverflow.png" /></a>
</li>
<li>
<a target="_blank" href="https://github.com/squeegy06"><img style="max-width:23px" src="/img/github.png" /></a>
</li>
<li>
<a target="_blank" href="https://www.linkedin.com/pub/jason-tolhurst/91/9b/775"><img style="max-width:23px" src="/img/linkedin.png" /></a>
</li>
</ul>
</div>
</header>
<div class="container-fluid">
<div class="jumbotron">
<div class="container-fluid">
<h1>Jason Tolhurst</h1>
<p class="lead">Professional PHP developer and programming enthusiast</p>
</div>
</div>
</div>
<div id="content" class="container-fluid">
<div id="about-me" class="col-md-12">
<h2>About Me</h2>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="projects" class="col-md-12">
<h2>Projects</h2>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="contact" class="col-md-12">
<h2>Contact Me</h2>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<footer>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Droid+Serif|Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/screen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</footer>
</div>
</body>
</html>
谢谢！
【问题讨论】：
-
为什么不把背景图放在body上呢？
-
你听起来很想拥有它为
background-position: 50% 50%; -
@AmmarCSE 我们最初尝试过，我们必须使用
background-position: center，虽然它在全屏时看起来不错，但当您在较小的窗口中查看时，它会有点奇怪。 -
您还可以设置媒体查询并根据浏览器大小更改
background-position。 -
@nikkwong 如何进行媒体查询？我不太懂 CSS。