Question

我是CSS和HTML的新手。我想要获得一个标题背景图像和页面背景图像，这个页面背景应该重复内容。

这里有CSS样式表......

body,td,th {
    color: #18130E;
    font-size: 13px;
    line-height:15px;
}
body {
    background: white url("images/test_bg4.jpg");
    background-color: #F6F3E0;
    margin:0px;
}
.header {
    height:164px;
    width:1032px;
    padding-top:66px;
    margin-top: 1cm;
    position:relative;
    left:50%;
    margin-left:-516px;
    background-image: url("images/header_back.png");
    background-repeat:no-repeat;
    background-position:top center;
}

    .page {
        height:164px;
        width:1032px;
        padding-top:66px;
        margin-top: 1cm;
        position:relative;
        left:50%;
        margin-left:-516px;
        background-image:url("images/bb2.png");
        background-repeat:repeat-y;

    }

我的HTML ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Lore Ipsum</title>
</head>

<link rel="stylesheet" type="text/css" href="style.css" />
<body>

<div class="header">

</div>

<div class="page">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut massa fringilla, malesuada neque ac, dapibus nunc. Vivamus ac rhoncus magna, vitae congue massa. Proin nec urna sed dolor mollis condimentum ut a ipsum. Proin dignissim malesuada nulla volutpat pellentesque. Donec maximus, tellus auctor vehicula pretium, elit augue consequat velit, eget tempus felis dolor eget justo. Sed iaculis eros quam, molestie venenatis odio varius sed. Fusce nibh tortor, vehicula vitae nunc at, lacinia auctor massa. Etiam egestas pulvinar rutrum. Maecenas auctor felis ut tempor dignissim. Donec vitae gravida libero. Aliquam convallis dignissim gravida. Duis fringilla, erat nec egestas tristique, lacus ex ultricies nunc, in ultricies lectus neque quis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas cursus ornare. Morbi accumsan auctor ex non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Cras sed imperdiet eros. In ac tincidunt mi. Aliquam consectetur ultricies turpis, at rhoncus ante accumsan a. Pellentesque ex turpis, venenatis a egestas eget, condimentum id velit. Sed molestie justo sed tortor tempor, vel scelerisque mauris pharetra. Sed eget ipsum ultrices, pretium purus id, ornare quam. Ut viverra orci pellentesque, dictum nulla in, laoreet eros. Aenean quis placerat libero. Nunc eu metus eu sem suscipit eleifend. Cras molestie mauris quis bibendum congue. Morbi ac risus quis metus vulputate lacinia. Pellentesque efficitur arcu quis est feugiat, ut elementum augue fringilla.
</p>
<p>
Duis consequat non nisi eget dapibus. Proin ultrices vel risus sit amet sagittis. Integer vulputate fermentum purus vitae feugiat. Donec semper, est eget suscipit pretium, est felis ultrices nulla, pulvinar mollis turpis arcu ac diam. Maecenas et lobortis magna. Aliquam mattis purus quis eros dapibus, in dignissim mi finibus. Etiam suscipit urna vitae tempus molestie. Duis eleifend ligula orci, et eleifend mauris imperdiet et. Nunc ac risus enim. Quisque sodales bibendum bibendum. Maecenas velit sem, auctor id est quis, tincidunt venenatis nibh. Sed sollicitudin vitae ligula non consectetur.
</p>
<p>
In eros libero, aliquet in enim eu, pellentesque condimentum nulla. Donec ullamcorper lobortis risus, vitae auctor mauris rutrum in. Praesent accumsan vitae magna id imperdiet. Nunc auctor ante non turpis mattis ultricies. Suspendisse viverra nibh id enim cursus commodo. Donec blandit, lectus sed scelerisque eleifend, nisi sem fringilla lacus, scelerisque auctor ex nisl iaculis nisl. Morbi velit sapien, elementum vitae vehicula vestibulum, lobortis eu lorem. Sed cursus sed urna id mattis. Nulla consectetur facilisis auctor. Nullam hendrerit eget sem vitae suscipit.
</p>
<p>
Aenean vel magna luctus, auctor urna et, vulputate lacus. Proin enim libero, dignissim sed faucibus id, tincidunt convallis arcu. Phasellus in finibus erat, sit amet luctus mi. Etiam at pellentesque magna, vel euismod felis. Phasellus consectetur augue elit, ac convallis magna bibendum ut. Cras et elit nulla. Etiam hendrerit auctor tortor, non consectetur justo viverra eu. Nullam scelerisque porttitor felis eget accumsan. Sed nec mauris libero. Pellentesque rhoncus leo in metus lacinia, a elementum justo interdum.
</p>


</div>

</body>

</html>

但问题是发生了什么......

这两个图像被认为是奥得河下的一个图像，就像一页一样。

Answer 1

好的，这里有一些让这个网站以时髦的方式运作的事情，我会给你一些建议：

为页眉和页面类的宽度指定百分比（例如：80％）。
删除左边：50％，因为它打破了页面流。
删除左边距：-516px，因为它还有留下的负面影响：50％。您可以通过给左边距离来实现向右移动元素，但我相信您通过使其在页面上以元素为中心来不正确地使用它，为了解决这个问题，您应该看到＃4。
为页面和页眉类提供保证金：0自动，以便将它们置于页面中心。
删除位置：相对于您的页面和标题类，除非您有其他元素具有不同的定位（如绝对/固定）。
为标题和页面元素指定最大宽度，该值取决于您的考虑因素。这将确保元素的宽度不仅仅是您想要的宽度，而且在不同的浏览器宽度上也会很流畅。
请参阅有关＆＃39;移动优先CSS＆＃39;的任何文档。这将为您提供未来知识的巨大推动，即使您只想制作非常简单的网站，也不用说这些知识有很长的路要走。

完成此操作后，如果您有更多我们可以提供帮助的问题，请告诉我它是否有帮助并更新您的代码。

Answer 2

我不确定这是否是你所期待的。

尝试：

<div class="header common">
</div>
<div class="page common">
</div>

的CSS：

.header {
    background-image: url("images/header_back.png");
}
.common{
    height:164px;
    width:1032px;
    padding-top:66px;
    margin: 0 auto;
    background-repeat:no-repeat;
    background-position:center;
}
.page {
    background-image:url("images/bb2.png");
}

Here's a Fiddle

CSS标题和页面图像背景

2 个答案: