div image backgrond

[craban]

i'm looking for a way to put a different background image in a DIV(a vertical left border and a top border), which should be repeated on the X or Y axis.
Is this possible?

Craban

[Stefan]

Originally posted by craban
i'm looking for a way to put a different background image in a DIV(a vertical left border and a top border), which should be repeated on the X or Y axis.
Is this possible?

Exactly what are you asking?
If you can repeat 1 image in y and a different in x direction?

Then no, not in the same div.
But you could use 2 containers with one repeat y and the other repeat x.

eg
<div style="background:url(image.png) repeat-x;">
<div style="background:url(image2.png) repeat-y;">
</div></div>

[craban]

I've got a public CSS template wich uses DIV instead of frames.
The template exists of a horizontal top, and three colums. With frames i can set a different background for the top and another for the left border.
With DIV i can set the background color, but can i put a background imagein each DIV?
http://users.pandora.be/strange-ente...border-all.JPG
This is what it should look like. i sliced small portions of the image to tile the top and a slice for the left border wich can be repeated.
Other images such as logo, the curve slice and text can be positioned.

this should be a bit more clearer.

regards
craban

[Stefan]

Originally posted by craban
[b]I've got a public CSS template wich uses DIV instead of frames.
The template exists of a horizontal top, and three colums. With frames i can set a different background for the top and another for the left border.
With DIV i can set the background color, but can i do this with DIV?
http://users.pandora.be/strange-ente...border-all.JPG
This is what it should look like.

Yes, you can do that with divs and CSS.
You just put the respective slice as backgroundimage in the correct div.

[swon]

Why don't you use tables?

[craban]

Yes, you can do that with divs and CSS.
You just put the respective slice as backgroundimage in the correct div.

is there anything special that should happen in the BODY tag?

This is the tag that starts/heads the div of the left column.:
<div id="leftcontent"> </div>

could you format the line of code for me, i've been at it the whole afternoon, suffice it to say that i'm a newbie taking on more than i can chew.

is it <img style... using "background" somewhere ??

Thanks in advance
regards
Craban

[Stefan]

Well with something like this it's easiest to show a compleate solution as there are many ways you can achive the same effect. Partial solitions thus have a tendency to be a bit vague.

Look here for an example of how to do it
http://hem.bredband.net/b103277/layoutremake/

[craban]

Thank you Stefan, you've been a big help.

Regards
Craban

[Rick Bull]

That page seems to be a bit messed up in my version of Mozilla (1.2.1) and the content isn't all visible, but I think it must be a bug, I can't see any coding errors This seems to fix it though: #content {position:absolute; top:90px; left: 84px;}

[Stefan]

Originally posted by Rick Bull
That page seems to be a bit messed up in my version of Mozilla (1.2.1) and the content isn't all visible, but I think it must be a bug, I can't see any coding errors This seems to fix it though: #content {position:absolute; top:90px; left: 84px;}

Hmm indeeed.
It loosk as it should in
Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.3a) Gecko/20021226 Phoenix/0.5

But Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.1) Gecko/20020826
is also broken.

Wonder if the bug is also present in Moz 1.0x
If it's only 1.1-1.2 it won't matter too much I guess, since people will quickly move on to 1.3 but if 1.0 is also affected by the bug then NS 7 is also likely to be :/

In any case it only seems to be a bug regarding the top margin. This works too in Mozilla
#content {margin:0 10px 0 84px; padding:90px 0 0;}