7777 66

I'm trying to get a sure way for a transparent header and footer that will stretch all the way to the edges of the document. However, I always have two problems:

  • The footer always ends up scrolling with the document (if scrolling is needed).
  • The text in the header and the footer is transparent too. I don't want that, I just need the background to be transparent, not the content.

I'm not sure what I should be adjusting. The body margins/padding or some trick with the header/footer css?

Thanks.

Edit: Here's the CSS I'm using:

body {
background-image:url('bg.gif');
color:orange;
margin:0;
padding:0;
}

#header,#footer

{
        background-color:white;
        height: 70px;
        width:100%;
        text-align:center;
        font-size:3em;

        /* for IE */
        filter:alpha(opacity=50);
        /* CSS3 standard */
        opacity:0.5;
}

#header {
border-bottom:gray solid 10px;
}

#footer{
border-top:gray solid 10px;
position:absolute;
bottom:0;
}
  • Care to share your current html/css codes? o.k.w about 7 years ago
  • It's in the "source code" and "inline style block" on the right :-) 7777 about 7 years ago

3 answers

0
points
This was chosen as the best answer

To solve the footer problem, you need a 'sticky footer' solution.

This is the one I prefer: http://www.cssstickyfooter.com/

Answered about 7 years ago by Tony Crockford
  • Perfect! Thank you so much! 7777 about 7 years ago
3
points

opacity unfortunately applies to the content of the container its applied to, in addition to the background. Use a transparent .png for the background. (Don't forget to include workaround for Internet Exploder.) As for the positioning of your foooter, use position: fixed instead of absolute. Have a look at the footer on my site. http://pointpointclick.com . It's fixed to the bottom of the viewport, and has a opaque background.

Answered about 7 years ago by Dwayne Anderson
  • ahh you beat me to it. +1 TailorDMI about 7 years ago
  • Thanks :-) I changed the background to a transparent PNG and it works for not making the content transparent. However, the scrolling problem I had was that when I scrolled up it would look like <a href="http://onethousandseas.org/onethousandseas-external/testytest/orig.png">this</a>. If the window was shorter than the content the footer would just scroll up along with it. I'd like to have the footer always remain at the bottom after the content as a regular part of the document, and not have the content scroll under it while fixed. (The new code is off to the right again.) 7777 about 7 years ago
  • +1 Thanks! 7777 about 7 years ago
  • I seem to have misunderstood your desired behavior for the footer. Tony's sticky footer recommendation seems spot-on for what you're trying to accomplish. Dwayne Anderson about 7 years ago
2
points

If you want just the background of the header/footer to be transparent you could try using the RGBA (CSS 3) for the background-color:

http://www.css3.info/introduction-opacity-rgba/

Of course as with most advanced CSS3 features this does not work in IE, but if you don't care it works in Opera, Chrome, Firefox, etc.

I used it here after I saw albinoblacksheep's site and liked the transparent blocks:

http://jimholby.kicks-ass.org/WoW/randomChats.html

Answered about 7 years ago by Jim Holby
  • Hey thanks for the CSS3 tip. I can't use it now, but it's nice to know what I can do in the future ;-) +1 7777 about 7 years ago