CSS背景 - 你会怎么做？

I really need some help with a background on a website. You can see the image here:

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

链接到图像

Now what i want is first of all to have the image placed in the top middle. Then i would like to have something like 10x250px (Width x Height) from the left of the image to be repeated - should a visitors screen resolution be wider than the image it won't seem like the site just stops at the edges.

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

I've tried several things, but it seems i keep running into different kind of technicalities that I'm not sure how to get around. So I would like to know how you would do it?

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

(The websites content will be 990px wide if that helps)

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

4 个解决方案

#1

Here is a way to accomplish this so that it attempts to center for all screen resolutions so that there is never a bottom scrollbar. bg.gif is your image ang bg_filler.gif is a 20px slice off of the side.

这是一种实现此目的的方法，以便它尝试以所有屏幕分辨率为中心，以便从不存在底部滚动条。 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>

Here is a sample http://www.wesgrant.com/samples/BackgroundSample/default.html

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

#2

But the repeating image on your <body>, and put the other image background on your wrapper <div> (or similar).

但是上的重复图像，并将其他图像背景放在包装器

（或类似的）上。

Alternatively, you can use CSS3 for multiple background images on the same element. Won't be as compatible though.

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

#3

Something like this style:

像这样的风格：

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

#4

You would want to create two images, one for the body to repeat, and the other being the header that you already have. here is your image in a demo. take a look at the source code to see how this works

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

http://luistovar.com/sodemo

No matter how large the screen resolution is now, the bg repeats. Good luck

无论现在屏幕分辨率有多大，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>

#1