新手，此文为整理自己的疑惑。存在问题欢迎指正，多谢。
最近在写一个学校的引导页，背景图片1920*679。
以前写适应屏幕都是用100%写，所以这一次依然这样写了，但是这次却是一个有内容的背景图片，所以100%的方法导致logo等被压缩变形了。
后来又被要求，屏幕是100%的时候显示图片中间的内容部分，浏览器内容缩放后，整个背景显示出来，即两边隐藏的背景也显示出来，并且在屏幕正常的时候不能出现横向滚动条。
PS：是内容缩放，而不是屏幕缩放。
如下图，图1、图2所示：
图1：
图2：
开始，似乎跳入了一个死胡同，一直在纠结，怎样能让他整个充满屏幕，还不被压缩，显然，这并不切实际。
于是，就开始了各种跳坑：
开始把背景图片两边多余的裁掉了，截取了一部分跟屏幕大小正合适的部分，当然，这也是 在自己欺骗自己，因为不需要换不同大小的显示屏，用不同的浏览器就会发现这是多么的不靠谱；
后来，又想，是否可以像媒体查询那样，写一段css或js，让它能够自由随着屏幕的大小切换不同的图片，因为个人js水平有限，不知道怎么写，不知道有没有这样的方法，如果有的话，还望大家不吝赐教，在这里多谢了
查到一个detectZoom 函数，此为网址
/article/55753.htm
再后来，想到了background-position：center；
但是因为设置的问题，导致一缩放，内容就错位了，，把wrapper-ydy设置的position：relative；其他内容区的div都设置的absolute，思维就一直没转出来，一直在想具体内容区要怎么定位，问了各路网友，又知道了一个，background-size:cover，设置了，也没有效果。
最后，同学帮着看出了问题：
在body上设置relative、居中，div设置relative、居中
以下为代码：
html:
<!DOCTYPE html><!--[if lt IE 9]><html class="lte-ie8" lang="zh-CN"><![endif]--><!--[if gt IE 8]><!--><html lang="zh-CN"><!--<![endif]--><head lang="en"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"><meta name="CODE_LANGUAGE" Content="C#"><meta name="vs_defaultClientScript" content="JavaScript"><meta name="vs_targetSchema" content="/intellisense/ie5"><!-- 搜索引擎--><link rel="stylesheet" href="css/ydy.css"><title></title></head><body><!--[if IE 6]><div id="ie6-warning">您正在使用IE6或以IE6为内核的浏览器，可能导致本网站无法正常显示，建议您升级到更高版本。<a href="/china/windows/internet-explorer/" target="_blank">点击下载</a><a id="ie6-close" href="#">关闭</a></div><script>$body =$('body');$body.addClass('ie6');$('#ie6-close').click(function(){$body.removeClass('ie6');$('#ie6-warning').hide();})</script><![endif]--><!--不同类型的页面用不同的类区分 wrapper-index（首页） wrapper-news（新闻页） wrapper-more（更多页） wrapper-channel（二级页）--><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></html>
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;}
