CSS3 background-size doesn't seem to work

Question

I'm struggling to get the size of CSS3 gradients to work properly. I've set a background-size:800px; yet, as seen in the jsfiddle below, it most certainly isn't 800px. Have I misunderstood the property? It seems to work differently in different circumstances; when used without other headers the background resizes with the browser, when included in the H5BP it doesn't resize, but is far too short in height.

I am very very confused! How on earth do I create a repeating background gradient of a specific size?

body {
  background: #0d1a2d;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1b355a), color-stop(50%, #000000), color-stop(100%, #1b355a));
  background-image: -webkit-linear-gradient(#1b355a, #000000 50%, #1b355a);
  background-image: -moz-linear-gradient(#1b355a, #000000 50%, #1b355a);
  background-image: -o-linear-gradient(#1b355a, #000000 50%, #1b355a);
  background-image: linear-gradient(#1b355a, #000000 50%, #1b355a);
  background-size: 800px;
}

jsfiddle: background-size example

Answer 1

You need to specify the size in both the x and y direction, like so:

background-size: 800px 800px;

View on JSFiddle

With that said, what you've done is compliant with the CSS3 specs . According to the MDN , however -- and what we can gather from your experiment -- browser compliance with this spec is inconsistent and unreliable. So, for now, it's best to explicitly define both directions.

Once browsers' behavior complies with the specs, setting a single value will set the other to be auto .