Forum Moderators: not2easy

Message Too Old, No Replies

Multiple image repeating on a single page?

         

Torniojaws

6:04 pm on Jan 8, 2004 (gmt 0)

10+ Year Member



How can you repeat multiple images using CSS, on a single .html document?
As far as I've gotten so far, I can only use background-repeat: repeat-y, but I'd like to apply repeat on multiple images on the site, something like this:

On .html document:

<div class="thingy"><img src="bgimage.jpg"></div>
<div class="thingy2"><img src="bgimage2.jpg"></div>

and in css file:

.thingy {
position: absolute;
top: 0px;
left: 677px;
image-repeat: repeat-x;
}

.thingy2 {
position: absolute;
top: 70px;
left: 0px;
image-repeat: repeat-y;
}

that image-repeat does not exist, though. That's what I've been wondering. Is there any way to align several pics with CSS?
W3Schools and W3C.org only list background-repeat, but no method on how to repeat normal pictures.

Thanks

AWildman

6:12 pm on Jan 8, 2004 (gmt 0)

10+ Year Member



I guess you have two options: 1. Physicaly put the img tag multiple times in the html or 2. create a class with the image set to the background and use the background repeat.
If you must for whatever reason have the image in the html instead of as a repeated background AND you needed to have it only repeat for a certain distance, you could accomplish that with javascript.

Torniojaws

6:24 pm on Jan 8, 2004 (gmt 0)

10+ Year Member



How would I go about including the pictures into the .css file?

There's nothing for that in the official docs :P

Here's the site I'm working on:

[koti.mbnet.fi...]

You can see the two images on the left edge and top right, that are cut short into just one repeat (img tag).
I'd like them to extend indefinitely downwards (left one) and rightwards (top right).

AWildman

6:38 pm on Jan 8, 2004 (gmt 0)

10+ Year Member



You could declare the following classes and place them on applicable divs:

.horizontalpic{background: url(url.gif) repeat-x;}

.verticalpic{background: url(url.gif) repeat-y;}

Torniojaws

6:54 pm on Jan 8, 2004 (gmt 0)

10+ Year Member



Doesn't work in Firebird 0.7 nor IE6 SP1, nothing is displayed.

Here's how it looks now:

[koti.mbnet.fi...]

AWildman

7:10 pm on Jan 8, 2004 (gmt 0)

10+ Year Member



You'll need to set a width/height for those divs if there is nothing else in the div besides the background picture. Sorry, I assumed there'd be something over the background pics.

Torniojaws

7:32 pm on Jan 8, 2004 (gmt 0)

10+ Year Member



Now that's weird.. it works sort of. Without anything inside the <div>, nothing appeared. Then I wrote random stuff inside the <div> and a small, probably the height of the font, sized image appeared..

Argh, this is getting on my nerves. I've spent all day on finding a working replacement for a standard, because IE does not display the worldwide standard correctly (insert a very mad face here) :P

All browsers show the first version of my site correctly, except IE. But I cannot make it not work in IE, so I'll have to redesign the whole layout so that it works in all browsers, including IE.

My original site was with frames, but IE does not display all content, like all other browsers do.

I'm now pondering on the CSS solution, but it's limited in options. Currently I'm testing out it with tables, but they're clumsy.

Here's the original site with frames, which does not display correctly in IE:

[koti.mbnet.fi...]