Background Footer Disappearing

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • dante671
    New Member
    • Feb 2010
    • 5
    #1

    Background Footer Disappearing

    Hi

    I have been having some trouble with my background footer its fine when I am at the default zoom level (In all browsers), however when I zoom out it resizes/disappears.

    I have two background images, a header and footer, the header resizes correctly and never disappears despite having almost exactly the same code.

    CSS:
    Code:
    body
{
	margin:0px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	position:absolute;
	left:50%;
	margin-left:-495px;
	min-width:990px;
	color:#000000;
}

.BackgroundHeader
{
	background: #FFFFFF url() Top no-repeat fixed;
	position:absolute;
	left:50%;
	margin-left:-495px;
	min-width:990px;
	text-align: center;
}
		
.BackgroundFooter
{
	background: #FFFFFF url() Bottom no-repeat fixed;
        position:absolute;
        left:50%;
        margin-left:-495px;
        min-width:990px;
        min-height:155px;
	text-align: center;
}
    HTML:
    Code:
    <body>
	<div class="BackgroundHeader"/>

	<div class="MainContent">
		...content here
	</div>

	<div class="BackgroundFooter"/>

</body>
    I have tried a quite a few possible solutions already including changing all sizes to use em's, placing a fixed div around the footer, removing the min-height attribute from the footer CSS (this must be included otherwise it won't be displayed at all).

    I'm hoping that someone else can see something I'm missing. If any more information is required let me know.
    Tags: disappear, footer, zoom
    • AutumnsDecay
      New Member
      • Mar 2008
      • 170
      #2
      A DIV with no content will not render properly, if at all.

      Your header probably works because there's physical content after it, whereas there is none after the footer.

      Try this:

      Code:
       .BackgroundFooter
 {
     background: #FFFFFF url() Bottom no-repeat fixed;
         position:absolute;
         left:50%;
         margin-left:-495px;
         min-width:990px;
         min-height:155px;
         text-align: center;
         clear:both;
 }

      Code:
       <body>
     <div class="BackgroundHeader">&nbsp;</div>
  
     <div class="MainContent">
         ...content here
     </div>
  
     <div class="BackgroundFooter">&nbsp;</div>
  
 </body>

        Comment

        • Ashwani Sharma
          New Member
          • Nov 2008
          • 46
          #3
          Agree with AutumnsDecay

          AutumnsDecay is right that a DIV with no content will not render properly in some major browsers like Firefox.
          Header section DIV is working because there is physical content under that DIV.
          You have to do something with footer like same as Header section.

          Ashwani Sharma
          Xicom Technologies

            Comment

            • dante671
              New Member
              • Feb 2010
              • 5
              #4
              Thanks for your replies.

              I have managed to get it working by removing the background image from the footer and using an <img> tag inside the footer DIV. So it seems like you were correct that a DIV must have some content inside it. This displays the background images at all times and correctly resizes them when I zoom in/out.

              At first I tried it how AutumnsDecay suggested however the header was displayed with a height of one line and the footer was not displayed at all.

                Comment

                Previous template Next
                Working...