关于大背景图片随浏览器百分比缩放的问题

此文为整理自己的疑惑。存在问题欢迎指正，多谢。
最近在写一个学校的引导页，背景图片1920*679。
以前写适应屏幕都是用100%写，所以这一次依然这样写了，但是这次却是一个有内容的背景图片，所以100%的方法导致logo等被压缩变形了。
后来又被要求，屏幕是100%的时候显示图片中间的内容部分，浏览器内容缩放后，整个背景显示出来，即两边隐藏的背景也显示出来，并且在屏幕正常的时候不能出现横向滚动条。
PS：是内容缩放，而不是屏幕缩放。
如下图，图1、图2所示：
图1：

图2：

开始，似乎跳入了一个死胡同，一直在纠结，怎样能让他整个充满屏幕，还不被压缩，显然，这并不切实际。
于是，就开始了各种跳坑：
开始把背景图片两边多余的裁掉了，截取了一部分跟屏幕大小正合适的部分，当然，这也是在自己欺骗自己，因为不需要换不同大小的显示屏，用不同的浏览器就会发现这是多么的不靠谱；
后来，又想，是否可以像媒体查询那样，写一段css或js，让它能够自由随着屏幕的大小切换不同的图片，因为个人js水平有限，不知道怎么写，不知道有没有这样的方法，如果有的话，还望大家不吝赐教，在这里多谢了
查到一个detectZoom 函数，此为网址
http://www.jb51 .NET/article/55753.htm
再后来，想到了background-position：center；
但是因为设置的问题，导致一缩放，内容就错位了，，把wrapper-ydy设置的position：relative；其他内容区的div都设置的absolute，思维就一直没转出来，一直在想具体内容区要怎么定位，问了各路网友，又知道了一个，background-size:cover，设置了，也没有效果。
最后，同学帮着看出了问题：
在body上设置relative、居中，div设置relative、居中
以下为代码：
html:

<body>
<div class="wrapper-ydy">
    <div class="ydy-top">
        <p class="p1"><a href="#">English</a> </p>
        <p class="p0"><a href="#">英文简介</a>   <a href="#"> 进入主页>></a> </p>
    </div>
    <div class="ydy-img">
        <div class="box">
            624*286
        </div>
    </div>
    <div class="ydy-nav">
        <span id="fljj"><a href="#">福林简介</a></span>
        <span id="fljz"><a href="#">福林剪纸</a></span>
        <span id="fldm"><a href="#">福林灯谜</a></span>
        <span id="flhy"><a href="#">福林海洋</a></span>
    </div>
</div>
</body>

css:

body{
    margin: 0 auto;
    text-align: center;
    padding: 0;
    position: relative;
}
a{
    text-decoration: none;
}

.wrapper-ydy{
    width: 100%;
    text-align: center;
    background-image: url("../images/yd/yd-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 679px;
    z-index: -99999;
}
.ydy-top{
    z-index: 1000;
    margin: 0 auto;
    /*background-color: #fffa62;*/
    width: 200px;
    position:relative;
    top: 9.9%;
    left: 12.8%;
}
.ydy-top p{
    margin: 0;
    /*background-color: #9dff77;*/
    width: 200px;
    height: 20px;
    padding-bottom: 5px;
}
.ydy-top .p0{
    margin-top: 0px;
    margin-left: -100px;
    width: 400px;
}
.ydy-top .p1 a{
   margin-left: -130px;
}
.ydy-top p  a{
    font-family: "Tahoma", "宋体";
    font-size: 14px;
    font-size: 0.875rem;
    color: black;
}
.ydy-top .p0  a{   font-weight: bold; display: inline-block; color: black;}
.ydy-img{
    margin: 0 auto;
    width: 640px;
    height: 289px;
    z-index: 100;
    /*background-color: palevioletred;*/
    position: relative;
    top:14.5%;
    left: -0.27%;
}
.ydy-img .box{
    width: 640px;
    height: 289px;
    position: absolute;
    top: 0;
    left: 0;
    /*background-color: yellow;*/
}
.ydy-nav{
    z-index: 100;
    margin: 0 auto;
    /*background-color: #ee9316;*/
    width: 540px;
    height: 48px;
    position: relative;
    top: 22.8%;
    left: 0%;
}
.ydy-nav span{
    display: inline-block;
    width: 44px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    /*background-color: #ff5cef;*/
}
.ydy-nav span a{
    font-family: "Microsoft Yahei";
    font-size: 16px;
    font-size: 1rem;
    color: #ffffff;
    font-weight: bolder;
    display: block;
    height: 30px;
    line-height: 20px;
}
 #fljj{  margin-left: 12px;}
 #fljz{ margin-left: 167px;}
 #fldm{ margin-left: 323px;}
 #flhy{margin-left: 477px;}

关于大背景图片随浏览器百分比缩放的问题

推荐阅读更多精彩内容