Making a background-color repeat only horizontally using CSS

Question

I'm specifying a color hex code as the background-color of a really long div. However, i'd like this color to be only repeated horizontally, from left to right, in the first part of the and not go down any further.

Can that be done using background-repeat:repeat-y or is there another method?

Answer 1

Colors have no height...they just exist, without dimensions. If you want a visual distinction between your background color and the rest of the document, you'll need to use a solid image as your background-image:

div.className {
  background-image:url("images/background.jpg");
  background-position:left top;
  background-repeat:repeat-x; // Causes repeat from left-to-right only
}

Answer 2

Do you mean repeating background color or an image? I assume an image becaues repeating a background color makes no sense. And yes this is the correct way:

#mydiv {
  background-image: url(images/background.png);
  background-repeat: repeat-x;
}