背景重复：空间； 有时在 css 中不工作

Question

I am trying to have a smaller background image repeat to make a pattern in the background of my site using this code in a stylesheet:

body
{
  background-image: url("../img/bknd3.png");
  background-position: 0px 1000px;
  background-repeat: space;
  background-color: blue;
  font-family: helvetica;
}

On most of my pages, this works how I want it to. There are 2 out of 6 pages where the background-repeat: space doesn't work. The background-color works on all the pages, oddly. Essentially, on the working pages, the background repeats and creates the background pattern I want, while the pages that don't work do not show the image to be repeated at all, while still having the blue background color. I am using a separate css stylesheet, so I don't think there should be any problems since the other 4 pages are referencing the same stylesheet and working fine (although I could be completely wrong).

I am fairly certain that it is the background-repeat: space; attribute, because when I change it to repeat-y or repeat-round they work for the 2 pages, although repeat-x , and repeat do not work properly either.

When I remove the background-position: 0px 1000px , what happens is that on the pages that aren't working, the repeat: space looks like what repeat-x is supposed to do.

Here are screenshots of working vs. not working:

working page

not working page

Answer 1

The repeat-space did not work because on those 2 pages, the only content was a

tag with basic placeholder text, so the page wasn't long enough to have the pattern repeat. The working pages had plenty of elements, so they were big enough to have the pattern repeat.

Answer 2

I think you should do that:

1. background-position: may top right or top center or %..etc not putting 1000px.
2. background-repeat: should use repeat for all x, y | or repat-x for horizontal | or repeat-y for vertical.
3. put them all in background shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/background