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 回答