Multiple background in one css class (round corners) [Archive]

Click to See Complete Forum and Search --> : Multiple background in one css class (round corners)

ProfessorX

08-21-2007, 05:47 AM

Hi all,
i want to make a table or a div rounded so i use a background image in: top left, top right, bottom left, and bottom right an image for each one and here it's a css example for top right one:
.rounded
{
background-position: right top;
background-image: url(images/tr.gif);
background-repeat: no-repeat;
}

so how can i do one css class for all, i want to include all backgrounds in one class and even i do like add a new class with the same name and add the new background and not working, see:

.rounded
{
background-position: right top;
background-image: url(images/tr.gif);
background-repeat: no-repeat;
}
.rounded
{
background-position: left top;
background-image: url(images/tl.gif);
background-repeat: no-repeat;
}

so what is the optimistic solution for this and what is the supported browsers for the solution,
Thanks and best regards :)

Znupi

08-21-2007, 06:00 AM

The multiple background feature is still being worked on and is part of CSS3 which hasn't yet been implemented in browsers (well, just really small parts like opacity). The way to do it is to have 4 divs in each other:

CSS Code:

div.rounded {
background: url(images/tr.gif) 100% 0 no-repeat;
}
div.rounded div {
background: url(images/tl.gif) 0 0 no-repeat;
}
div.rounded div div{
background: url(images/br.gif) 100% 100% no-repeat;
}
div.rounded div div div {
background: url(images/bl.gif) 0 100% no-repeat;
padding: 10px; /* So the text doesn't appear over the corners */
}

HTML Code:

<div class="rounded"><div><div><div>
This is a rounded box!
</div></div></div></div>

Hope this helps :)

Mr Moo

08-21-2007, 06:01 AM

I read an article about this somewhere, but I can't find the link now. If I recall correctly, either FireFox 2 or Opera 9 (could've been another browser) supports multiple background images by combining them into a single style: background-image: url(image1.gif) url(image2.gif)
or something like that. In general though, it is not supported by browsers, so you may as well drop this line of thinking. On my own site (http://www.eternal.co.za/elizabeth/index.html), I implemented RUZEE.ShadedBorder (http://www.ruzee.com/blog/shadedborder) to achieve rounded borders with minimal fuss.

The other option is to use either multiple divs (i.e <div class='topLeftBorder'><div class='topRightBorder'><div... .../div></div>) or tables.

mactheweb

08-22-2007, 12:29 AM

You want rounded corners? Smiley Cat gives you all the info links you could possibly need. (http://www.smileycat.com/miaow/archives/000044.php)

Major Payne

08-22-2007, 02:35 AM

Another good link:

Four curved corners with no extra markup or javascript (http://www.cssplay.co.uk/boxes/four_cornered)

Ron

ProfessorX

08-22-2007, 08:38 AM

Thank you all :)

WebJoel

08-22-2007, 09:12 AM

Rounder corners in a container? Make the container "position:relative;" to 'seize control' over the 0,0 start corner, and place four "position:absolute;" rounded-corner images in the appropriate corners. And you can still place a "background-image" in the parent 'container' DIV. A bit 'old school' compared to the options available.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
p {font-size: 100%; line-height:1.0em; margin:16px 0 10px 0;}

html, body {min-height:100%; height:101%; padding-bottom:25px;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<style>
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>

<div style="position:relative; width:500px; height:auto; border:1px solid silver; padding:40px 30px; margin:25px auto;" >
<h1>Level-1 Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<img src="#" style="position:absolute; left:0; top:0; width:25px; height:25px; background-color:silver;" />
<img src="#" style="position:absolute; right:0; top:0; background-color:silver;" />
<img src="#" style="position:absolute; left:0; bottom:0; background-color:silver;" />
<img src="#" style="position:absolute; right:0; bottom:0; background-color:silver;" />
</div>

</body>
</html> You CAN actually use TWO background image on the page by using background-image on the two main 'parent' elements:

<style>
html {background-image:url(imageOne.jpg); ....}
body {background-image:url(imageTwo.jpg); ....}
</style>