Repeat background until height reached

Question

For some reason, I can't set a maximum height on my page.

Here is the code:

html
{
    min-width: 100%;
    min-height: 100%;
}

body
{
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: darkblue;
    height: 1200px;
}

.tile {
    display: inline-block;
    width: 300px;
    height: 300px;
    /*border: 1px solid black;*/
    transition: 2s all linear;
    margin-top: -4px;
    margin-left: -4px;
}

Here is the JSFiddle:

http://jsfiddle.net/cty276x5/1/

Also it should repeat the "squares" in all directions(width and height) but get cut off when they reach the "background height/width limit".

So why can't I limit the height the way I did?

@SEMSEM If you click on the JSFiddle link, you will see the whole code. The JS code draws a couple squares that act as my background. — Bogdan Lazar, Nov 25 '14 at 19:15

score 1 · Answer 1 · answered Nov 25 '14 at 19:13

1

In your .title set height equals to 100vh

height: 100vh;

answered Nov 25 '14 at 19:13

SaidbakR

13,303
20
101
195

I have no ".title", instead ".tile" that says how big the "squares" should be. So if I was to change the height/widthe on the ".tile" class, I'd get squares with a weird height. Nothing to do with the background. – Bogdan Lazar Nov 25 '14 at 19:19

score 0 · Answer 2 · answered Nov 25 '14 at 19:16

CSS is asking 100% of what ? you have to have some reference, without it it would be 100% of infinite so it assumes 0. Need to have some parent element with a size or you need to give it a size and then you can use % on child elements. Example,

HTML

<body>

  <div class="first-div"></div>

</body>

body {
 width: 1000px
 height: 2000px;
}

div.first {
  width: 90%; // will 900px i.e. 90% of 1000px
  height: 100%; // will be 2000px
}

therefore when you say 100% within nothing above you can now see why CSS has no idea what you asking. We both know it is your screen size, but as that is relative and CSS doesnt know your screen size.

Hope that helps.

I made a ".wrap" class and gave it the settings you described, also changed my "body" class. I have learned something new, but I'm afraid this still doesn't fix my problem. — Bogdan Lazar, Nov 25 '14 at 19:25

Repeat background until height reached

2 Answers2