Question

如何仅在我的网站布局上重复我的背景图片。我的图像宽度为1像素，高度为400像素，我希望它是屏幕宽度的100％。

我以为是......

CSS：

#bg-image {
  background-image: url("images/bg.png")
  background-repeat:repeat-y;
  background-size: 100%; 
 }

HTML：

<div class="wrapper">
  <div class="bg-image"> 
  </div>
</div>

但这不起作用。我已经查看了其他StackOverflow的答案，但我找不到与我的问题类似的问题。任何帮助赞赏的欢呼

Answer 1

尝试将height:auto提供给应用背景图像的Div，并将其包含在您希望扩展的Div下。

<div class="OuterDiv">
    <div class="backgroundImage"></div>
</div>

CSS

.OuterDiv
{
    height:100%;
}

.backgroundImage
{
    background-image:url('someimage.png') repeat-x;
    height:auto;
}

Answer 2

我认为您与X混淆了Y。你应该使用：

#bg-image {
    background-image: url("images/bg.png");
    background-repeat: repeat-x;
}

Answer 3

试试这个：

#bg-image
{
background-image:url('paper.gif');
background-repeat:repeat-y;
height: 100%;
}

Answer 4

你能试试吗，

#bg-image {
    background-image: url("images/bg.png");
    height: 100%;
}

Answer 5

尝试使用此代码重复水平图像..

repeat-x : Work for Horizontal
repeat-y : Work for Vertical


'CSS
#bg-image {
background-image: url("images/bg.png")
background-repeat:repeat-x;
background-size: 100%; 
}
HTML:
<div class="wrapper">
 <div class="bg-image"> 
 </div>
</div>

背景重复到右边

5 个答案: