Question

我整夜都在阅读论坛＆amp;仍然无法想出这个。

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

这个div（类the_background）是我的容器div的子节点，它是正文的子节点，如下所示：

头标记（此处的常用内容）关闭头标记

<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。

我目前复制的这段代码没有给我任何帮助。为什么到底是这样??? !!!我一整天都在玩这个游戏，并设法获得黄色后备颜色或背景图像，以便在特定时间显示，但我无法控制其宽度或高度。我已经修改了我可以识别的每个相关属性！如果有人能帮助我，我会感激不尽。如果有人也可以解释为什么我粘贴的代码不起作用，那也很好。

非常感谢你提前!!!

P.S。是的，我已经三重检查拼写＆amp;语法等：/

Answer 1

如果没有一个包含你的图像的好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/

无法获得bg img来做我想要的CSS

1 个答案: