0

我整晚都在阅读论坛，但仍然无法弄清楚这一点。

我想让我的 div 之一作为我网站中其他所有内容的背景。我还希望它从一个特定的位置开始，即它不会占据整个页面。

这个 div（the_background 类）是我的容器 div 的子级，它是 body 的子级，如下所示：

头标签（通常的东西在这里）关闭头标签

<body>
<div class="container">
<div class="header">
    <img src="images/open-access/header.png">
</div>
<br/>
<div class="signout">
    login name | <a href="#">signout</a>
</div>
<br/>

<div class="menu">
  <ul>  
    <li><a href="#">Bunch of links etc.</a></li>        
  </ul>
  <div class="under_menu">
  </div>
</div>

<div class="welcome">
        Welcome, name!
</div>
    <div class="the_background"></div>

等等

以下是我的外部样式表的代码：

.container {margin:0 2em;
        text-align: center;
        position: relative;}

（一堆代码，然后：）

.under_menu{background-color: rgb(141, 0, 212);
width:auto;
height: 1em;
padding-bottom: 0;}

.the_background{background-color: yellow;
            background-image: url('images/bg.png');
    width: auto;
    height: 100%;
    background-size: cover;
    z-index: -10;
    position: absolute;
    left: 0;}

（一堆更多的代码等）

我最终想要的（因为我不能发布图像）是背景图像从 under_menu div 的底部开始，也占据与它相同的宽度，并在页面的其余部分继续。目前，under_menu div 是完美的——它跨越整个页面，但每边的边距很小（50%），并且高度为 1em。

我目前复制的这段代码没有给我任何东西。到底为什么会这样？？？！！！我整天都在玩这个，并设法在某些时候显示黄色后备颜色或背景图像，但我无法控制它的宽度或高度。我已经修改了我可以识别的所有相关属性！如果有人可以帮助我，我将不胜感激。如果有人也可以解释为什么我粘贴在那里的代码不起作用，那也很好。

非常感谢您提前！！！

ps是的，我一直在检查拼写和语法等三重检查：/

4

1 回答 1

0

如果没有包含您的图像的良好 jsfiddle，这将很难。你能帮我们设置一下吗？

同时，试试这个 CSS：

.the_background {
    background: yellow url('images/bg.png') 50% 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    position: absolute;
    left: 0;
    top: 1em
}

结果：http: //jsfiddle.net/jJxCs/

于 2013-11-23T12:45:25.457 回答