...

View Full Version : two images as background



johnmerlino
05-05-2010, 09:32 PM
Hey all,

I'm struggling to get two images to display as background. At first, it worked but I then required a header div to have a top margin of 1em which actually pushed the graphic away from top of page even though the graphic was not applied as a background image to the header div. This is what I got:



* {margin:0;padding:0;}

html {
background: url('/images/bg-grad.png');
height: 100%;

}

body {
background: url('/images/body-tile.png');
margin: 0;
padding: 0;
height: 100%;

}

html>body {
min-height: 100%;
height: auto;
}

The intruding header div:

#header{
width: auto;
height: 40px;
padding: 1% 10px 1% 10px;
color: #fff;
background: url(/forest-green-theme/images/ui-bg_highlight-soft_20_2f3f32_1x100.png) bottom left;
margin: 1em 1em;
}

The structure:
<html>
<head>
<body>
<page_container>
<page_content>
<header>


Thanks for any reply.

Scriptet
05-05-2010, 09:38 PM
I wouldn't bother adding a background image to the html element, this is very uncommon and personally i've never seen it used in real-world so I guess it's not recommended unless somebody knows otherwise as at the least it would have a lot of browser compatability problems.

In this case couldn't you just merge both the images into one and add as a bg to the body?

Otherwise your best bet would just be to add an extra element(e.g a wrapper DIV) and add the second bg to that.

johnmerlino
05-05-2010, 09:58 PM
That was the first thing I tried. I do have a div called container and I did apply the background image but because the header div had a top margin of 1 em, it was pushing the div container away from the top by 1 em.

Scriptet
05-05-2010, 10:22 PM
Sounds as if you are suffering from collapsing margins here, try adding overflow:auto; to your container DIV.

More on Collapsing Margins (http://reference.sitepoint.com/css/collapsingmargins), basically it's default behaviour and adding overflow:auto; is one of many triggers you can use to prevent this from happening.

johnmerlino
05-06-2010, 02:03 PM
Sounds as if you are suffering from collapsing margins here, try adding overflow:auto; to your container DIV.

More on Collapsing Margins (http://reference.sitepoint.com/css/collapsingmargins), basically it's default behaviour and adding overflow:auto; is one of many triggers you can use to prevent this from happening.

overflow: auto was always a bit of a mystery to me. I used it before with the intention of having the container div always wrap around its content. However, it often causes a scrollbar to appear rather than just extending. Is there a way to ensure it extends to enclose its content yet not have a scrollbar appear? I think I read somewhere this is done by, when using a floating div, that all contents in it must be floating as well.

Scriptet
05-06-2010, 06:00 PM
overflow: auto was always a bit of a mystery to me. I used it before with the intention of having the container div always wrap around its content. However, it often causes a scrollbar to appear rather than just extending. Is there a way to ensure it extends to enclose its content yet not have a scrollbar appear? I think I read somewhere this is done by, when using a floating div, that all contents in it must be floating as well.


overflow:auto; does always extend to contain it's content, the only reason a scroll bar would ever appear is if you've specified a width or height for the DIV in question, and it's contents (children) have a larger defined height/width than the one set for the parent thus causing the scrollbars to appear. So in this case it would seem you are setting a width or height to small for it's contents..

Floating the container is another method to avoid collapsing margins if you prefer. Or other methods as listed in the article.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum