Background border image; float works, background-position doesn't

Issues with nesting?

[Entity]

So I have a main portion of the website that I want fitted with image borders.

CSS:

#MainBody
{
margin-left:10%;
margin-right:10%;
min-width:800px;
}
.Border_top
{
background-image:url(../images/main_top.png); /* Border image */
background-repeat:repeat-x;
background-attachment:fixed;
background-position:0% 0%;
width:100%;
}

HTML:

<div id="MainBody">
<div class="Border_top">
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</div>
</div>

Using that code, the image simply doesn't show up at all, anywhere on the page. What's stumping me is that using the float property instead results in the image showing up completely fine, where it should.

.Border_top
{
background-image:url(../images/main_top.png); /* Border image */
background-repeat:repeat-x;
float:left;
width:100%;
}

However, I can't use the float property as it causes the images for the right and bottom borders to appear where the ones for the top and left are (in other words, broken and ugly). Any ideas?

[lucy24]

Get rid of {background-attachment: fixed}. With it, I can see only the bottom edge of the graphic. (I threw together my own for experimenting.) Unless I add a top margin to the body; then the graphic disappears entirely.

Without the {background-attachment}, the two versions are still different: the floating div shows the text below the background, the regular one shows the text over (that is, covering) it. If you don't want that, simply add a bit of top padding to match the height of your image. You don't want a float anyway, do you?

Is your min-width intended to be 800px or 1000px?

[rocknbil]

You could also do top left instead of 0%. The shorthand version,

.Border_top
{
background: transparent url(../images/main_top.png) top left repeat-x;
width:100%;
}

Or sub color for "transparent."

This may be one of those cases where the div actually has no height and the float caused a "shrink wrap". Add this right after your text before closing .Border_top:

<div style="clear:both"></div>

and I'd bet it will do the same thing. You can also put a border on the div just to see what's happening.

[lucy24]

You can also put a border on the div just to see what's happening.

Funny you should say that, because a colored border is one of my standard debugging tools and was one of the first things I tried here ;)

It confirms what I see without the margin: the non-floating version (minus the background-attachment) has created a top margin that invisibly contains most of the graphic, even though I've explicitly told everything to have no top margin. Exact same behavior in all browsers (three families, don't have MSIE but I assume OP does).

Stop the presses. Entity, how big is your own graphic? I made mine taller, and discovered that the mysterious top margin-- the one that eats the image-- has nothing to do with the size of the graphic. It's at a self-determined 1/2 em. If the graphic is fatter, most of it is visible. Again, same behavior in all browsers and where the ### does Opera hide its "recent items" list?