Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    two images as background

    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:

    Code:
    * {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.

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Sounds as if you are suffering from collapsing margins here, try adding overflow:auto; to your container DIV.

    More on Collapsing Margins, basically it's default behaviour and adding overflow:auto; is one of many triggers you can use to prevent this from happening.

  • Users who have thanked Scriptet for this post:

    johnmerlino (05-06-2010)

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Scriptet View Post
    Sounds as if you are suffering from collapsing margins here, try adding overflow:auto; to your container DIV.

    More on Collapsing Margins, 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.

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Quote Originally Posted by johnmerlino View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •