Geek Answers Handbook

Background image closing the browser window minus the header and footer below the fold

The name may be a little confusing, I will try my best to explain what I need to achieve. Basically, I have the following elements for a specific web page:

  • Title - always displayed above the content.
  • Content - The background image covers the entire content area - this is the key part.
  • Sub-footer - Information about content always visible below.
  • The footer is the standard footer of the company, visible if the height of the window is a certain size, otherwise you need to scroll down to see it

As I mentioned above, part of the content of the page is perhaps the hardest part. I need a large image to be in the background, which covers the entire area. CSS tricks have a great guide on creating full-screen background images . Therefore, I hope that this can be achieved easily. The problem is how to make the footer at the bottom if the window is <720px with the footer below it below the fold (you need to scroll to it). A window> 720px should show both the footer and the footer without scrollbars.

At this point, I will not even worry about the minimum height that the content should have (perhaps this will require a scrollbar in the content of the <div> or make a footer and lower times).

Here are the image layouts of what I'm trying to achieve:

First up is the <720px tall window, where the footer needs to be scrolled to: <720px tall window where the footer needs to be scrolled to

The second is the <720px tall window, which was scrolled down to see the footer: enter image description here

Finally - a tall window> 720px, which has no scrollbars, because everything is visible: enter image description here

I am using jQuery and don't care about IE6. Can I achieve this in CSS? Do I need to use jQuery for dynamic tuning? Full page backgrounds are easy to execute using css3, I am glad to use css3 or html5 to do what I need.

+6
jquery html css html5 css3
source share
1 answer

You definitely cannot use CSS position: fixed , because it always refers to the viewport, not the parent element.

What you need to do is have a “stand” as a fixed positional child of “content”. You will need to use Javascript for this.

Something like this should do what you need. Try changing the CSS height variable for #content so you can see how it behaves with different content heights:

 <html> <head> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <style> #header { height: 50px; background-color: #ccc; width: 100%; margin-bottom: 10px; } #content { position: relative; height: 1500px; width: 100%; background-color: #ccc; } #subfooter { height: 50px; width: 100%; background-color: #666; position: fixed; } #footer { height: 50px; width: 100%; margin-top: 10px; background-color: #ccc; } </style> <script> $(document).ready(function(){ $(document).scroll(function() { position_subfooter(); }); var position_subfooter = function() { $("#subfooter").css("bottom", "20px"); if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) { $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20)); } } position_subfooter(); }); </script> </head> <body> <div id="header"> <h1>HEADER</h1> </div> <div id="content"> </div> <div id="subfooter"> <h2>SUB FOOTER</h1> </div> <div id="footer"> <h1>FOOTER</h1> </div> </body> </html>
+1
source share

More articles:


All Articles