Html 背景图像赢得'；不要动，怎么把一切都集中起来？

我制作了第二张背景图片，但无论我改变了什么元素，它看起来都无法定位。最重要的是，当我进入Chrome并使用inspect，然后移除该层时，它不会消失吗

我遇到的另一个问题是试图找出我需要更改哪些代码才能使页面布局中的所有内容都居中。比如我是不是把数字弄错了？ 如果有人能帮我，我将不胜感激

我的代码：

/*主要背景*/
身体{
背景图像：url（../img/background.png）；
背景重复：重复-x
}
#头像{
背景图片：url（…img/HeaderBike.png）；
背景重复：无重复；
z指数：1；
浮动：左；
位置：绝对高度：155px；
宽度：155px；
}
.集装箱{
宽度：960px；
保证金：0自动；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：100%；
线高：1.5；
文本对齐：居中；
}
/*导航元件*/
/*搜索栏*/
表格组{
/*页眉*/
48px；
浮动：左；
}
.网站导航{
高度：155px；
}
.网站导航{
边缘顶部：16px；
浮动：左；
}
.网站导航{
宽度：600px；
保证金：0自动；
}
.网站导航李{
利润率：35px 33px；
浮动：左；
}
.网站导航a{
颜色：白色；
文字装饰：无；
字体大小：粗体；
}
.站点导航a:悬停{
垫底：2件；
边框底部：1px纯白；
}
/*标题元素*/
氢{
线高：0.8；
字体大小：72px；
字体大小：粗体；
颜色：#fff；
宽度：450px；
边缘：左；
边缘顶部：115px；
填充底部：42px；
浮动：左；
文本对齐：左对齐；
}
h1{
文本对齐：左对齐；
}
.探照镜{
利润率：-142px 900px；
浮动：左；
}
/*文章类*/
.文章{
浮动：左；
宽度：100%；
边际下限：72px
}
.第条img{
宽度：20%；
保证金权利：1%
}
.第h1条{
浮动：左；
宽度：70%；
保证金：5px0；
文本对齐：左对齐；
字体大小：粗体；
字号：22.5px；
}
.第p条{
浮动：左；
宽度：70%；
保证金：5px0；
文本对齐：左对齐；
字体大小：粗体；
字体大小：12px；
}
页脚{
显示：块；
宽度：100%；
浮动：左；
}
.搜索{
保证金：-141px 1125px；
浮动：左；
}
.RoadToYellow{}

天空队
 通往黄色的道路
团队新闻
环意自行车赛
 兰达将带领球队在吉罗-德尔-特伦蒂诺（giro del Trentino）的比赛中取得令人印象深刻的胜利，他在去年获胜后，以优异成绩重返赛场
克鲁德得到了休息
 这位强大的德国人在本赛季初曾是一块巨石，现在他将从中得到休息，并有望在本赛季结束后重返马勒库
金尼克的新合同
 Peter Kinnick的合同仍未与球队经理Alistar McDowell达成一致，他表示已经提出了新的合同报价
弗罗姆在第三
 克里斯·弗洛姆在《多芬标准》的开场白阶段以第一天的强劲表现获得第三名

尝试使用：

背景尺寸：封面
这样做的目的是将图像放大到足以覆盖容器所在的位置

此外，如果要使图像居中，可以使用：
background position:center

最后看起来是这样的：

#HeaderBike {
  background-image: url(..img/HeaderBike.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 1;
  float: left;
  position: absolute height: 155px;
  width: 155px;
}

或更简化：

#HeaderBike {
  background: url(..img/HeaderBike.png) no-repeat cover center;
  z-index: 1;
  float: left;
  position: absolute height: 155px;
  width: 155px;
}

不同的方法（使用flexbox）
结构化HTML

<!-- Header with logo, links and search -->
<header></header>
<!-- Intro section -->
<section></section>
<!-- Main with images and articles -->
<main></main>
<!-- Footer with customers and navigation -->
<footer></footer>

还有一列

.column {
  flex: 1
}

这样每一列都有相同的宽度

水平和垂直居中，如下所示：

/* Center vertically */
.v-centered {
  align-items: center;
}

/* Center horizontally */
.centered {
  justify-content: center;
}

例子

*{
框大小：边框框；
}
身体{
保证金：0；
字体系列：“蒙特塞拉特”，无衬线；
}
a{
文字装饰：无；
}
.文本中心{
文本对齐：居中；
}
标题{
背景：#49B2CB；
}
标题a{
颜色：白色；
}
.集装箱{
最大宽度：960像素；
保证金：0自动；
边框：1px实心；
}
.科{
填充物：3雷姆1.5雷姆；
}
/*使页眉和页脚填充不像正常情况下那样大*/
标题.第节，
页脚部分{
垫面：0.75rem；
垫底：0.75rem；
}
/*行、对中、缠绕*/
.行{
显示器：flex；
保证金：0-0.75雷姆；
}
.以v为中心的行{
对齐项目：居中；
}
.以行为中心{
证明内容：中心；
}
.行{
柔性包装：包装；
}
.row>列{
弹性：1；
}
.row>*{
填充：0.75rem；
}
/*航行*/
ul导航{
填充：0；
保证金：0；
列表样式：无；
}
李国宝{
浮动：左；
填充物：5px；
}
导航a{
颜色：#7979；
}
/*钮扣*/
.btn{
文字装饰：无；
显示：内联块；
填充：0.5雷姆；
边界半径：0.5雷姆；
颜色：白色；
}
.btn.light{
背景：#49B2CB；
}
.btn.dark{
背景：#000000；
}
/*介绍*/
.介绍{
背景图片：url(http://lorempixel.com/960/400/sports/1);
颜色：白色；
文本对齐：居中；
}
.简介h1{
字体大小：3rem；
保证金：0；
}
/*主要*/
主氢{
保证金：0.5雷姆0；
}
/*使主要图像具有响应性*/
主img{
显示：块；
高度：自动；
最大宽度：100%；
}
/*页脚*/
页脚图形{
保证金：0；
}
页脚导航{
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：767px）{
梅因街{
弯曲方向：立柱；
}
}

天空队
通往黄色之路

团队新闻






.column {
  flex: 1
}

/* Center vertically */
.v-centered {
  align-items: center;
}

/* Center horizontally */
.centered {
  justify-content: center;
}