PDA

Click to See Complete Forum and Search --> : Trying To Figure This Out?

mikegreenia.com
06-04-2008, 09:49 PM
I'm just fooling around with a box model but I can't figure out why my images are coming out the way they are on the screen. If you look at the top and bottom images they have no background but when I place them on a black background it repeats. Is this a CSS problem or do my images have to have the same background as my HTML page will have?

LINK: http://mikegreenia.biz/test/

HTML:

<!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=utf-8" />
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
<center>
<br />
<div class="box">
<div class="top"></div>

<h1>header</h1>
<p>text text</p>
<p>text text</p>
<h1>header</h1>
<p>text text</p>
<p>text text</p>

<div class="bottom"></div>
</div>
</center>
</body>
</html>


CSS:

@charset "utf-8";
/* CSS Document */

body {
background-color:#000000;
}

.box {
width: 729px;
padding: 0 20px;
background-image: url(mid_bg.gif);
}
.box .top {
height: 21px;
font-size: 1px;
margin: 0 -20px;
background-image: url(top_bg.gif);
}
.box .bottom {
height: 24px;
font-size: 1px;
margin: 0 -20px;
background-image: url(bot_bg.gif);
}
WebJoel
06-04-2008, 10:25 PM
Default behaviour for background-image is to repeat if the container is larger than the image.

To not repeat, you'd specify:

background: url(path.image.jpg) no-repeat;

I'm not quite sure what you're after here, looking at your images it appears that the top and the bottom are to be non-repeating, and the middle image, repeats ("tiles") to fill the container.

I think you'd have better luck with this is the container were "position:relative;", and the top and the bottom image were "position:absolute;" and negatively-positioned 'outside' of the container to form the visual effects of 'rounded corners', and let the tiling background-image, "repeat".
Is this what you are saying?
Centauri
06-04-2008, 11:18 PM
You are getting the overlap due to the top and bottom images being inside the repeating side image, and the side image is showing through the transparency of the top and bottom images. The top and bottom divs can be pulled out over the side image with negative top and bottom margins, but you will also need a small top and bottom padding on .box to prevent margin collapse, as well as relative position to keep IE happy :.box {
width: 729px;
padding: 1px 20px;
background-image: url(mid_bg.gif);
}
.box .top {
height: 21px;
font-size: 1px;
margin: -15px -20px 0;
background-image: url(top_bg.gif);
position: relative;
}
.box .bottom {
height: 24px;
font-size: 1px;
margin: 0 -20px -15px;
background-image: url(bot_bg.gif);
position: relative;
}