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:

Expand|Select|Wrap|Line Numbers

 
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:

Expand|Select|Wrap|Line Numbers

 
<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.

Feb 4 '10 #1

Subscribe Post Reply

4961

AutumnsDecay

170

100+

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:

Expand|Select|Wrap|Line Numbers

 
 .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;

 }

Expand|Select|Wrap|Line Numbers

 
 <body>

     <div class="BackgroundHeader">&nbsp;</div>
 
     <div class="MainContent">

         ...content here

     </div>
 
     <div class="BackgroundFooter">&nbsp;</div>
 
 </body>

Feb 9 '10 #2

Ashwani Sharma

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

Feb 12 '10 #3

dante671

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.

Feb 12 '10 #4

Similar topics

Space under footer...

by: markthedoc | last post by:

Hi I've got a problem with excess space under my footer. I want the page to finish at the bottom of my footer, but the background image of the body tag carries on until it reaches the bottom of...

HTML / CSS

can't get footer div to behave in IE!!

by: stevenews | last post by:

Hi All, I have a footer div that I can't make behave!! It has the same css as the div above it, but it won't align...I've included the pertinent css: a container that holds the entire layout, the...

HTML / CSS

Seperating Navbar, Banner, Footer, Sponsers, and the pages contents.

by: Death Slaught | last post by:

I have my entire page in my "main" div. div.main { width: 100%; height: 100%; border: 1px solid gray; } on the left of the page I have a banner.

HTML / CSS

100% header and 100%footer image

by: darkzone | last post by:

Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in...

HTML / CSS

Footer doesn't stay stationary on page with javascript ticker

by: rassklass | last post by:

HI all, I have designed a site found at www.pickupnewspapers.co.uk/nottinghamshire/index.html but I cant get the footer to sit stil on the page. It is because of the javascript ticker, everytime...

HTML / CSS

Centering background-image in list menu

by: stevedude | last post by:

CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of...

HTML / CSS

header,footer,left & right column fixed and body information scrolling to use div

by: Noorain | last post by:

I designed a site. i want to header,footer,left & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all...

HTML / CSS

footer and wrapper alignment

by: j3ff3 | last post by:

Hi, First post, but lurked for a while! Probably something really simple, but my footer doesn't seem to want to align with its containing div. Its slightly off to the right. I don;t really...

HTML / CSS

footer wouldn't to bottom of screen

by: dragon52 | last post by:

Hi everyone, I want to have the footer div stick to the bottom of the screen and my code works until I add the <form></form> to the html. Can somebody spot the problem for me. I only know basic...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing