Question

所以我正在构建一个bootstrap模板，我遇到的问题是尝试添加一个对齐到站点左侧的背景图像和右侧的副本，它就像一个小的40px宽度的重复高度类型图案。

它是这样写的，我知道这是愚蠢的，但我已经尝试了组合的东西，在引导容器内，外面等等。

#background-right {
height: 100%;
position: absolute;
right: 0;
top: 0;
}

.containerbackgroundright {
background-image: url("../images/subtle_stripes.png");
height: auto;
max-width: 50px;
min-width: 0;
position: relative;
right: -15%;
}

忽略我写出来的愚蠢方式。目前正好在<body>之后和<container>之前。发生的情况是重复背景的高度大多数时间只达到页面的大约75％，具体取决于容器与该页面内容的距离。它不是页面的完整100％。

如果我将position:更改为fixed它实际上有效，但会产生不需要的结果，因为我不想修复它。它的宽度可以通过自举进行精美调整，但是高度不会延伸到我想要的范围，它会停止，然后在它下方有空白。

我的猜测是，如果我用高度为1600px的重复图案制作出一个图像，并给出了最小高度/最大高度，这可能会解决，但我不愿意。有什么我缺少或可以尝试？

所以再一次，只需要一个侧边栏对齐页面左侧，另一个侧面对齐页面，可以流畅地调整，以便它消失或隐藏在引导程序容器后面（这是有效的）但我需要它是一个完整的100页面的高度％，无论页面延伸多少。

Answer 1

你需要提供

background-repeat:repeat-x;

和

background-repeat:repeat-y;

在css中创建重复模式。

Bootstrap左/右对齐背景图像重复图案，页面高度为100％

1 个答案: