Hi All I have managed so far for non transparent I'm trying to do it with single image ... Index of /test The first one works ok if no transparency as corners "cover" each other and looks ok for solid color bg (works great in IE6)... http://vision.to/test/SingleImageRounded.html The second one is transparent ... http://vision.to/test/SingleImageRounded_Transparent.html Is there any way to make it work properly for transparent corners images ? The method i use is bordered here: http://vision.to/test/SingleImageRounded_Transparent_Test.html Any tips welcome Thank You in advance feha P.S. Anyone who can improve it, I will add to credits in next tutorial about rounded corners + shadows
For colored backgrounds, try: div.module-rounded, div.module-rounded div { background: url('images/rounded_green.png'); background-color: #000; /* only for good browsers: inherit */ } Code (markup):
Hi Erik, thanks it works great with bg color (Tack så mycket ) I hope to get it work as transparent with bg patterns too but this was a great step forward Thanks feha
Test changing body background in this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Fluid Rounded Transparent Edge Using One Image</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <!--[if lte IE 6]><script type="text/javascript"> function ie6TransparentEdge(){ document.getElementById("ie6").style.height="auto"; document.getElementById("ie6").style.height=document.getElementById("ie6").parentNode.offsetHeight+"px"; } window.onload = ie6TransparentEdge; window.onresize = ie6TransparentEdge; </script><![endif]--> <style type="text/css"> body{ background:#fec;} #content{ margin:auto; width:80%} #content p{ margin:10px;text-align:justify} .rounded { position:relative; overflow:hidden; } .rounded span, .rounded div { display:block; background:url(images/rounded-edges.gif) no-repeat; /* 1820x40px; rounded 1800x40px, side-edges 10x40px */ } .rounded .top { background-position:0 0; margin:0 25px 0 -10px; height:20px; } .rounded .top span { position:relative; margin:0 -35px 0 25px; height:20px; background-position:100% 0; } .rounded .middle { position:relative; padding:1px 0; background-position:-1810px 0; background-repeat:repeat-y; width:100%; } .rounded .middle span { position:absolute; top:0; right:0; bottom:0; width:10px; background-position:0 0; background-repeat:repeat-y; font-size:0; } .rounded .middle span#ie6 { position:static; float:right; margin:-1px 0 0 -10px; width:10px; height:100%; } .rounded #inner { position:relative; margin:-21px 0; width:100%; height:auto; background:none; } .rounded .bottom { background-position:0 100%; margin:0 25px 0 -10px; height:20px; } .rounded .bottom span { position:relative; background-position:100% 100%; margin:0 -35px 0 25px; height:20px; } </style></head><body> <div id="content" class="rounded"> <div class="top"><span></span></div><div class="middle"><span id="ie6"></span><div id="inner"> <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convallis enim sapien tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. At Maecenas porttitor dui libero vel eros tincidunt et quis condimentum. Et tempor ac vitae ut Vestibulum faucibus elit Phasellus netus ut. Id orci orci ipsum tellus convallis est.</p> <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convallis enim sapien tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. At Maecenas porttitor dui libero vel eros tincidunt et quis condimentum. Et tempor ac vitae ut Vestibulum faucibus elit Phasellus netus ut. Id orci orci ipsum tellus convallis est.</p> <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convallis enim sapien tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. At Maecenas porttitor dui libero vel eros tincidunt et quis condimentum. Et tempor ac vitae ut Vestibulum faucibus elit Phasellus netus ut. Id orci orci ipsum tellus convallis est.</p> </div><span></span></div><div class="bottom"><span></span></div> </div> </body></html> HTML: