I am missing something and can’t figure it out. I can get the top of the rounded corner and the bottom. but when i follow the example for the middle. It doesn’t work. The middle doesn’t line up with the top and bottom. the
background: url(box-middle.png) center repeat-y; doesn’t seem to be doing it’s job.
this is what i end up with
[img]http://www.cybersmods.com/untitled.PNG[/img]
here is my code minus the lorem ipsum
<!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>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="box-one">
<img src="box-top.png" alt="" />
<p>
</p>
<img src="box-bottom.png" alt="" />
</div>
</body>
</html>
Here is my stylesheet
.box-one
{
width:300px;
background: url(box-middle.png) center repeat-y;
}