Repeat Pattern to 100% of the viewport

Question

in CSS i made that code:

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

but to seperate the header from the content i would like to have a "bar" between them.

so i made:

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

but the Bar doesn't go "unlimited" it just repeat till it reaches "1920px" can i somehow change that? to put

min-width:100%

didn't work

Roko C. Buljan · Accepted Answer · 2016-04-30T20:11:06.420

0

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

if you want something to be max-width 1920 than use a container child (of body) element.

what way you #zag DIV will spann the full width of html, body which is dictated by the viewport width.

If #zag is a DIV (and it's not position absolute or fixed) than you need to set only it's height. min-width:100% is not needed since it already spans the full available width - being a block-level element.

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>

edited Apr 30 '16 at 20:11

answered Apr 30 '16 at 19:38

Roko C. Buljan

196,159
39
305
313

Yes but what i meant is more like. Right now the seperation bar only Spans 1920px (if the viewport is bigger then there will be a aprubt end) but i want everything to be max. width 1920 EXCEPT that bar i want that one bar to be repeated even further – Marcel Schulz Apr 30 '16 at 19:49
@MarcelSchulz read my answer. Than use (pseudo code:) ` <1920DIV /> <1920DIV /> ` – Roko C. Buljan Apr 30 '16 at 19:54
So for example <1920header> content 1920header> ? – Marcel Schulz Apr 30 '16 at 20:04
@MarcelSchulz yes. You got it right. So the point is that `body` should not have a 1920 px max-width. But rather those centered 1920header element. – Roko C. Buljan Apr 30 '16 at 20:06
Allright now i got it. then i'll have to order my CSS first. Thank you very much – Marcel Schulz Apr 30 '16 at 20:06

Repeat Pattern to 100% of the viewport

1 Answers1