DotNetNuke Skins and Resources by ThinkofDesign

Hi

Does anybody have any tips or tutorial links on the best way to used sliced background images using  "div's" with css?

Thanks in advance.

Lynn

Let's say that we have an image 500px width and 200px height.

We create a wrapper div:

< div style="width:500px;height:200px;position:relative;" >

and in this div we put the slices as background images of small divs using absolute positioning.

So the final code could be like this:

< div style="width:500px;height:200px;position:relative;" >
< div style="width:100px;height:100px;position:absolute;top:0px;left:0px;background:url(slice1.jpg);" >&nbsp;< /div >
< div style="width:100px;height:100px;position:absolute;top:0px;left:100px;background:url(slice2.jpg);" >&nbsp;< /div >
< div style="width:100px;height:100px;position:absolute;top:0px;left:200px;background:url(slice3.jpg);" >&nbsp;< /div >
...
< /div >

Hope that helps!

Cheers,

Vasilis