将图案重复到 100% 的视口

Question

在 CSS 中，我编写了该代码：

   body {
    background-color:#f3f3f3;
    max-width:1920px;
    min-width:1024px;
    margin:0 auto;

但是为了将 header 与内容分开，我希望它们之间有一个 "bar"。

所以我做了：

#zig {
max-width:100%;
background-image:url(../img/zig.png);
background-repeat:repeat-x;
height:25px;

但是 Bar 没有走 "unlimited" 它只是重复直到达到“1920px”我可以改变它吗？放

min-width:100%

没用

Answer 1

max-width:1920px; /* REMOVE ME */

如果你想要最大宽度为 1920 的东西而不是使用容器子（主体）元素。

你#zag DIV 的方式将跨越 html, body 的整个宽度，这由视口宽度决定。

如果#zag 是 DIV（并且它不是绝对位置或固定位置），那么您只需设置它的高度。 min-width:100% 不需要，因为它已经跨越了整个可用宽度 - 作为块级元素。

html,body{height:100%;}
body{margin:0; font:16px/1 sans-serif;}

header, section, footer{
  display:block;
  margin: 0 auto;
  max-width: 400px;   /* you use 1920. 400 is for demo :) */
  background:#eee;
}

.zag{
  height: 50px;
  background:#0fb;
}

<header>HEADER</header>
<div class="zag">ZAG</div>
<section>SECTION</section>
<div class="zag">ZAG</div>
<footer>FOOTER</footer>

将图案重复到 100% 的视口

Repeat Pattern to 100% of the viewport

html

css

design-patterns

repeat

background-repeat