重复模式到视口的100%

时间:2016-04-30 19:22:28

标签: html css design-patterns repeat background-repeat

CSS中的

我做了那个代码:

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

但要从内容中分隔标题我想要一个" bar"他们之间。

所以我做了:

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

但酒吧没有“无限制”#34;它只是重复,直到达到#1920; 1920px"我可以以某种方式改变它吗?放

min-width:100%

没有工作

1 个答案:

答案 0 :(得分:0)

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

如果你想要的东西是max-width 1920而不是使用容器子(body)元素。

你的#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>