Confusion with repeat-x and position: fixed

HTML & CSS
1

Hello,

I have spent hours trying to create a basic repeated footer in a webpage to span 100% across the screen:

(I need position:absolute but this only works if i apply position:fixed)?

.footer {
position:absolute;
background-color:#000;
width:100%;
height:250px; 
z-index:2;
background-image:url(images/footer_repeat.gif);
background-repeat:repeat-x;
}

I already have a repeat for the header which works fine:

body{
background:#fff;
height:2000px;
background-repeat:repeat-x;
background-image:url(images/header.gif);
z-index:2;
}

I’m not sure what i’m doing wrong and if there’s an easier way i’d love to know!

Thank you,
Ross

2

You haven’t said what the result of that code is. Still, position: absolute should generally not be used for page layout. Perhaps you need to position the footer somewhere, by adding something like

bottom: 0;

… but I doubt this will solve all of your problems. Sounds like you may be after a “sticky footer” which is not easy with CSS. See here for some details on what is required.