Question

http://www.gardencrafts.co.uk/index.htm

在上面的链接中，背景有一个叶子进入身体的中间！我想要的是将整个图像分成三个部分。标题，内容和＆amp;最后是页脚。我裁剪了标题所需的部分，但事实是叶子给背景图像的高度为600px。标题高度为150像素，因此隐藏了背景的多余部分。

我尝试用CSS中的Overflaw来显示它并不起作用。如何在不改变标题div高度的情况下让图像显示整个内容？

这是当前标题DIV的CSS代码..

  #header{
background-image: url(../images/top-bg.png);
background-repeat: no-repeat;
margin: 0 auto;
width: 1000px;
height: 200px;
overflow: visible;
}

Answer 1

我认为您必须将该背景应用于标题的父容器，但为我们提供了一个更好的答案，我们需要查看您的代码

Answer 2

这可以通过多种方式解决，这是以下解决方案之一：

为#body提供页面的完整原始background-image，其中包括落叶。

使用右侧background-position，您可以将#header的上半部分与#body的下半部分合并。

检查出来：JSFiddle

<强> HTML

<div id="header">
</div>
<div id="body">
</div>

<强> CSS

#header
{
    background-image:url("https://twitter.com/images/resources/twitter-bird-white-on-blue.png");
    width:300px;
    height:150px;
    border-style:none;
    border-left-style:solid;
    border-right-style:solid;
    border-color:yellow;
}
#body
{
    background-image:url("https://twitter.com/images/resources/twitter-bird-white-on-blue.png");
    width:300px;
    height:300px;
    background-position: 0px -150px;
    border-style:none;
    border-left-style:solid;
    border-right-style:solid;
    border-color:red;
}

然而，这将允许background-image重复自己（如果你不停止它），这将在之后显示另一片叶子。

显示div之外的背景图像

2 个答案: