PDA

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.