为什么我的背景图像被放大？
我试图设置1920 * 1080的背景图像，并且出于某种原因图片正在放大并且正在裁剪。为什么我的背景图像被放大？
另外，我想知道是否有可能将<navbar>设置为不覆盖背景的顶部。有没有把它分开的机会？
这是我的CSS文件背景设置：
body {
background: url(images/back.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body,
html {
font-family: 'Caveat Brush', cursive;
color: white;
}
这是image looks like on my browser如何：
谢谢。
这是因为您正在使用background-size：cover; 这将缩放背景图像以适应它所在的html元素的宽度和高度，同时拉伸和/或裁剪图像。 考虑到导航栏： 如果你在你的HTML导航栏，它有例如50像素给定的高度只需添加
body {
padding-top: 50px;
background-position: top 50px center;
}
到你的CSS
增加margin-top到身体不会修复它..因为navbar将在体内。您可以使用填充，并说背景位置：顶部50px中心。 –
嗯你是对的我会编辑我的答案 – d3orn
所以我应该写什么代码而不是背景大小：覆盖 –
根据您的建议做一些改变后，导航栏本身随着paddding越来越低（图片将被附上）。
的HTML代码是：
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Eyal Younger </a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
<li><a href="#">HTML COURSE</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS代码：
body {
padding-top: 50px;
background-position: top 50px center;
background: url(images/back.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: height: 1920 width: 1080px;
}
body,
html {
font-family: 'Caveat Brush', cursive;
color:white;
}
h1 {
font-weight: 700;
font-size: 5em;
}
h3 {
padding-top: 0px;
padding-bottom: 0px;
margin-top: 5px;
margin-bottom: 10px;
}
#mainimg {
width: 180px;
height: 180px;
border-radius: 50%;
border: 8px double red;
box-shadow: 5px 5px 6px #353232;
}
.content {
padding: 6%;
text-align: center;
text-shadow: 0px 4px 3px rgba(0,0,0,0.9),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
试试这个为全背景图像
body{
margin: 0;
background:url('images/back.jpg') no-repeat fixed 0 -300px;
background-size:100%;
哇，从背景中明确分离导航栏，谢谢你！ 但是有没有什么能够保持背景图像的真实比例？ –
我也是初学者，所以我不完全确定，不确定这是不是你正在寻找的东西，但你可以沿着x轴和y轴移动图像，让它看起来像你想要的样子（我编辑过上面的帖子）如果我可以看到页面的截图，以便我可以更好地了解发生了什么 –
这是一个链接，示例它在我的浏览器中的外观以及它如何改变我的背景图片的比例 https://i.stack.imgur.com/5Y87Q.jpg –
如果你尝试'高度：1920;宽度：1080px;'？ – WasteD
仍然是一样的没有变化 –