repeat an image from a specfic position to another specific position

Question

Hi

i want to set an image in the background of a div with a property to repeat that image from the start of the div to the 99% of height of the div.

Is this possible? OR i have to find another work round?

Answer 1

Try using this css:

.myimg {
    background-image:url(path here) repeat left top;
    height:99%;
}

You need to apply the class myimg to the image. You might want to adjust the height there.

Note that you can also customize the starting/repeating position of the image by specifying the values to left and top like:

background-image:url(path here) repeat 20% 50%;

Answer 2

Not purely with CSS background-repeat. Once you specify a repeat in a direction (x or y), you get 100% of that element's width or height;

You could try adding an element that overlays 1% of your <div>s height, thereby hiding the background image.

Another option would be to nest 2 div's, and add the background-image to the nested element:

<div style="height: 100%">
    <div style="height: 99%; background: url(img.png) repeat-y 0 0;">
</div>

Answer 3

You can't do this with only CSS, you'll need an HTML <div> or similar to position the background.