div容器背景图像

时间:2015-01-20 19:34:44

标签: html css

我创建了一个div容器。这个容器应该得到一个背景图像。图像为1200 x 64像素。如果我在div容器中写一些东西,应该完整显示1张图片。如果我在70px的高度上写文字,应该完全显示2张图片。目前,我必须给容器一个固定的高度

以下是my Page + the image,此处为代码:



*{
    margin: 0px;
    padding: 0px;
}

.div_mit_background {
    margin-right: auto;
    margin-left: auto;
    
    width: 1200px;
    
    background-image: url('http://img3.fotos-hochladen.net/uploads/background7j0b6tzhl1.png');
    height: 200px;
}

p{
    margin-left: 64px;
    color: white;
    padding-top: 20px;
}

<html>
    <head>
        <link href='index.css' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <div class="div_mit_background">
            <p>
                Here is some content.
            </p>
        </div>
    </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

一种可能的解决方案,如果您想要做的就是在新行的情况下显示完整的背景图像,请执行以下操作:

  • 从p tag的CSS中删除padding-top
  • 将此添加到p标签的CSS:line-height:64px;,以便该行的高度与背景图像的高度相同,并且将显示一个图像或两个(不是一个半等)。 )

这是p标签的更新CSS。

p{
    margin-left: 64px;
    color: white;
    line-height:64px;
}

并且对于左边或右边的填充或边距,您可以根据需要进行设置。

并且不要忘记将.div_mit_background的高度设置为height:auto;而不是200px。

希望它有所帮助。