Problems With Repeat-Y in CSS
The repeat-y keyword of cascading style sheets, or CSS, tells your Web browser to create as many copies of a background image as are needed to fill the height of an HTML element. Problems can arise if you don't use the correct syntax for repeat-y, or omit the other ingredients needed to create the repeating background image. It helps to create a simple Web page using repeat-y to recall the essential elements of vertically repeating backgrounds with CSS.
Other People Are Reading
-
Syntax
-
If you're not seeing a background image repeat vertically, it may be because you've used the wrong syntax for the repeat-y keyword, or the style definition that uses the keyword. Consider this sample CSS definition that uses repeat-y. Notice each character in the statement's text. The braces indicate the start and end of a style definition. The "background" keywords tell your browser's CSS interpreter to perform a style operation. The "url" portion has beginning and ending braces and quotation marks to specify an image file. CSS requires all of these components to make an image repeat vertically. If any of those components are missing or incorrectly typed, the image won't repeat.
body
{
background-image:url('bground.gif');
background-repeat:repeat-y;
}
Incorrect Path or File Names
-
When you're having trouble getting an image to repeat vertically in the background of a paragraph, div, body, or other HTML element, make sure the image you want to repeat exists, and that it's in the same folder as your Web page. The following sample CSS statement defines a style using a vertically repeating background image of an HTML div element. Notice that the pathname to the image includes a hypothetical folder named "myImages." If you don't have such a folder on your server, or if the "bground.gif" image file isn't in that folder, the vertical image repetition will not work. Fix the problem by making sure the files referred to in the styles that use repeat-y exist, and are in the folders that the repeat-y statements specify.
div
{
background-image:url('..\myImages\bground.gif');
background-repeat:repeat-y;
} -
Correct HTML
-
Though your CSS style definition using repeat-y may be free of errors, faulty HTML code that applies that definition incorrectly can make the repeating image fail to appear. The Web page excerpt that follows shows a style definition and an HTML paragraph tag. Notice that the "myStile" style name that the p tag refers to with its class attribute differs from the "myStyle" style in the CSS code, by one character. This difference in names means the p tag won't show the repeating background as the programmer intended. To fix this problem, the programmer can fix the typo in the paragraph tag's Class attribute.
<style type="text/css">
p.myStyle
{
background-image:url('bground.gif');
background-repeat:repeat-y;
}
</style>
</head>
<body>
<p class="myStile">Some text.</p>
</body>
Size
-
If you're trying to vertically repeat an image in an element whose height is smaller than two stacked copies of the image, the repeat-y image repetition will not work. For example, if you're trying to apply a repeat-y style to a relatively small page element like a paragraph, chances are that you won't see any image at all. The reason is that a paragraph's height is nearly always smaller than an image's height, unless your image is tiny. You can clear this obstacle by using the CSS Height keyword to specify a greater height for the element. In the following excerpt, a CSS style for a paragraph element sets that element's height to a relatively large dimension. The height may allow the repeat-y effect to work.
P.myStyle
{
height:300px;
background-image:url('bground.gif');
background-repeat:repeat-y;
}
-
