Question

我真的需要一些关于网站背景的帮助。你可以在这里看到图像：

Link to image

现在我想要的是首先将图像放在顶部中间。然后我想从图像的左边开始重复10x250px（宽度x高度）的东西 - 如果访问者的屏幕分辨率比图像更宽，那么看起来网站就不会停在边缘。

我已经尝试了几件事，但似乎我一直在遇到不同的技术问题，我不知道如何解决。所以我想知道你会怎么做？

（如果有帮助，网站内容将是990像素宽）

Answer 1

但是<body>上的重复图片，并将其他图片背景放在您的包装<div>（或类似）上。

或者，您可以将CSS3用于同一元素上的多个背景图像。虽然不会兼容。

Answer 2

这是一种实现此目的的方法，以便它尝试以所有屏幕分辨率为中心，以便从不存在底部滚动条。 bg.gif是你的形象ang bg_filler.gif是一个偏离20px的切片。

   <style>
   body 
   {
        background-image: url(bg_filler.gif);
        background-repeat: repeat-x; 
        background-color: #D1CDCA;
        margin: 0px;         
   }

   .backgroundPart
   {    
        height: 300px;
        background-image : url(bg.gif);
        background-position: top center;
        background-repeat: no-repeat;  
        padding: 0px;
        margin: 0px; 
   }

</style>

</head>
<body>
    <div class="backgroundPart">

    </div>

</body>

以下是http://www.wesgrant.com/samples/BackgroundSample/default.html

示例

Answer 3

像这样的风格：

<style>
body{
    margin:0;
    padding:0;
    background-image:'repeating_image...';
    background-repeat:repeat-x;
    }

#wrapper {
    width:990px;
    background-image:url(http://img852.imageshack.us/img852/4169/testbg01.jpg);
    }
</style>

Answer 4

您可能想要创建两个图像，一个用于正文重复，另一个是您已经拥有的标题。这是你在演示中的图像。看看源代码，看看它是如何工作的

http://luistovar.com/sodemo

无论现在屏幕分辨率有多大，bg都会重复。祝你好运

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
* {padding:0px; margin:0px;}
body {
background-image: url(repeat.jpg);
background-repeat:repeat-x;
background-position:top;
}

#header {
background-image: url(header.jpg);
background-repeat:no-repeat;
width:1600px;
height:252px;
margin:0px 0px 0px 0px;
}
-->
</style>

</head>
<body>
<center>
<div id="header"></div>
</center>
</body>
</html>

CSS背景 - 你会怎么做？

4 个答案: