homepage Welcome to WebmasterWorld Guest from 54.211.97.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Background border image; float works, background-position doesn't
Issues with nesting?
Entity



 
Msg#: 4316527 posted 9:20 pm on May 23, 2011 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4316527 posted 3:28 am on May 24, 2011 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4316527 posted 5:09 pm on May 24, 2011 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4316527 posted 8:08 pm on May 24, 2011 (gmt 0)

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved