Question

标题说的大部分内容。我有一个div容器，包含所有站点div和背景。我只是试图让屏幕显示“拉伸”，如果你把屏幕从最大值或不同的显示器尺寸/像素（有一台计算机在工作中没有填满屏幕，但我的宽屏幕）它和其他人一样）。此外，如果你取消最大屏幕，它会切断部分网站，我不知道为什么。

相关CSS：

body {

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
color: lightsteelblue;
font-size: 14px;
background-image: url("../images/hardcoregames-bg-final.png"); 
-webkit-background-size: 100%; /*for webKit*/
-moz-background-size: 100%; /*Mozilla*/
-o-background-size: 100%; /*opera*/
background-size: 100%; /*generic*/
background-repeat: no-repeat;
background-position: top left;
background-color: #222;
}
#maindiv {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#navigation {
position: absolute;
top: 50px;
/*left: 360px;
margin: 0px;*/
left: 50%;
margin-left: -325px;
z-index: 10000;
width: 650px;
height: 100px;
padding: 50px 20px;
background-color: transparent;
float: left;
}

我的标记很简单：

<body>
    <div id="maindiv">
        <div id="navigation">
            <img src="images/hardcoregames-logo1.png"></img> 
        </div>
        <div id="other divs just like navigation but positioned in different spots">
            stuff
        </div>
    </div>
<body>

看到它的实际效果：Site 我尝试在背景大小中使用100％的宽度和高度，但这使得它更糟糕，高度不是自动。我试过把主要的div作为绝对的。我尝试过使用背景大小来覆盖。另外，我已经在这里看到了其他的东西，但是到目前为止我读过的所有想法都没有，我不想修复背景，图像和主页一样大，所以我想要就这样。

P.S。请提醒一下，至少在IE上最大化屏幕时，“maindiv”也会被切断。我在后台添加了这个问题因为我认为它们都与我的宽度/高度有关，但是我真的不知道。我发布的代码工作正常，直到您将屏幕尺寸设置得足够小，然后向右滚动。同样在大小相同的IE屏幕上，你不能再一直在网站上留下它的切断。

显示左右一直滚动的图像。向右滚动，它会截断页面的1/3。向右滚动，bg并没有完全填满，看起来很愚蠢。 pics

Answer 1

如果我理解正确......

创建足够大的背景图像，以获得最宽的标准屏幕分辨率（2560）和最小的屏幕比例（4：3）。创建大小为2560 x 1920的背景并设置'background-size：100％auto'应该让它在所有显示器上都没有任何问题。

Answer 2

问题可能是背景大小。如果您工作的计算机使用的是Internet Explore 8或更低版本，则不支持后台大小。如果这是问题，我可以解释一下解决方法，请告诉我。

编辑：不是IE 8，请尝试以下。

html { 
  background: url('../images/hardcoregames-bg-final.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 3

删除background-position: top left;，它就会被解决。这会使您的徽标始终位于窗口的左上角，而与窗口大小无关

Answer 4

此样式可以使您的背景以任何不同的分辨率延伸：

body, html
{
  font-size:14px !important;
  color: lightsteelblue;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: url("../images/hardcoregames-bg-final.png"); 
  background-repeat: repeat-x;
  background-color: #222;
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 5

此设置是在取出最大屏幕时修复网页“切断”的原因。 Fixed 谢谢@Mr。外来

背景;在我的研究中，并且应该是显而易见的，你不能“动态地”改变背景，因为人们改变了IE的窗口大小，比如IE。根据我的意见，这修复了每个初始屏幕尺寸的背景。

html, body {
    height: 100%;
    width: 100%;
    background-image: url("../images/hardcoregames-bg-final.png"); 
    -webkit-background-size: 100% auto; /*for webKit*/
    -moz-background-size: 100% auto; /*Mozilla*/
    -o-background-size: 100% auto; /*opera*/
    background-size: 100% auto; /*generic*/
    background-repeat: no-repeat;
    background-position: top left;
    background-color: #222;
}

如果我错了，请纠正我。但我能做的最好的事情就是调整背景大小，就是这样。我想一些javascript或者更好的是，jquery可以修复它，因为它是动态工作的问题。我现在暂时打开这个答案，如果我错了，请评论。不希望错误的信息消失。

无法使用不同的屏幕尺寸正确定位div和背景

5 个答案: