Background Image and Page Height Problem

HTML & CSS
1

Hi All

Haven’t posted to this forum for a long time, hope everyone is well.

I’m launching a site next week and I just need to fix a page height problem. I’ve spent a few hours on this, but haven’t reached a solution.

I want the content of my webpage to always have the minimum height of the browser window eg : -

http://joomla1.manor-road.ox.ac.uk/index.php/media.html

However, on a page with more content, : -

http://joomla1.manor-road.ox.ac.uk/index.php/home.html

the background image does not follow the page content all the way to the end of the page.

How can I get the background image to always follow through regardless of the amount of page content? I’ve attached some of the relevant css settings


body {
	font-family: Arial, Helvetica, sans-serif;
	background: url(../images/background.png) repeat fixed;
	margin: 0px;
	padding: 0px;
	line-height: 135%;
	  height:100%;
}

html {
	padding: 0px;
	margin: 0px;
    height:100%;
}

#site_background {
	width: 988px;
	margin: 0px auto;
	height:100%;
	
}

.background_1 {
	background:  url(../images/background_1.gif) repeat-y top center;
	

}

#content_background {
	width: 938px;
	margin: 0px auto;
	padding: 0;
	background: #111316;
	 height:100%;
	 position:relative;
	  
}


#site_wrapper {
	width: 888px;
	background: #ffffff;
	padding: 0px 25px;
	text-align: left;
	margin: 0px auto;
 position:relative;
 min-height:100%;
}

Thanks for any help with this

Didcot84

2

add overflow:hidden to expand backgroud-image and remove height:100%


#site_background {
	width: 988px;
	margin: 0px auto;
	[COLOR="Red"]height:100%;[/COLOR] [COLOR="Blue"]/*remove this height*/[/COLOR]
	overflow:hidden;
	
}

.background_1 {
	background:  url(../images/background_1.gif) repeat-y top center;
	overflow:hidden;
}

you can use overflow:auto also for expanding your background image

vineet

3

Hi Vineet

Thanks very much for this post.

Unfortunately, when I apply your solution, the pages with less content lose their ‘mimimum height’ eg : -

http://joomla1.manor-road.ox.ac.uk/index.php/media.html

This is the vicious circle that I have been trapped on!

Is there any way to get them both working as per my requirements?

Thanks

4

Just set min-height:100%; instead of height:100% :). Of course keep overflow:hidden;

Then feed IE6 some support

  • html #element{height:100%;}

It treats height as min-height :slight_smile:

5

Thanks for the reply Reese

The problem is that this only means that the background image is 100%, but the white background

#site_wrapper {
	width: 888px;
	background: #ffffff;
	padding: 0px 25px;
	text-align: left;
	margin: 0px auto;
 position:relative;
 height:100%;
}

Only follows the page content. Eg please look at

http://joomla1.manor-road.ox.ac.uk/index.php/media.html

Sorry to be a pain here, I keep going round and round in circles myself, thanks for all of the help received so far.

6

hi Ryan

while answering this thread i came to a confusion that i used and tested


overflow:hidden

and also


overflow:auto

and both gave the same results. is “auto” and “hidden” properties same.

why did both gave same results. i mean in both cases the background image got extended.

vineet

7

To contain floats all that is needed is an overflow (auto/hidden/scroll). It doesn’t matter which.

hidden is the preferred choice because in overflow:auto; IE will someetimes show scrollbars if it thinks the text (or content) is wider then it is. Then scrollbars appear and we don’t want that :slight_smile:

So hidden is preferred now. The actual overflow:auto (what it’s suposed to do (show scrollbars once content meets the width/height set)) isn’t waht we are after. We are after the side effect-containing the floated elements, which both overflow:auto;/hidden; do :slight_smile:

8

The point seems to be that once a container is supposed to actually do something special with “overflow” then it means the container must be able to “see” its children. So the rules change over to what static boxes with static children do.

I often have trouble with overflow: hidden and 100% height pages (even min-height). Mostly with in-page skip links. For IE6 you can just tell it specially “overflow: visible” to undo the “hidden”, but if other browsers find some problem with the height and the overflow, then another enclosing method might be better (but overflow is the easiest way to solve enclosing problems so I’d stick with it and just be aware of possibly problems so you can switch to another solution if needed).

9

hi Ryan,

thanks for the explanation.

vineet

10

Hi,

If I understand correctly then you can’t do what you are trying to do. You cannot have multiple elements stretching down to 100% in css - only tables cells can do that (sometimes).

Apart from the height:100% in html and body you cannot use height:100% anywhere else and you can only use min-height:100% on the first wrapper on the page and nowhere else either.

In essence the first min-height:100% element creates the 100% height effect which it can achieve via the 100% height set on html and body. Further nested elements cannot achieve any height based on this min-height element because that will collapse to height:auto.

You cannot use height:100% again because that would mean the layout would never grow and you would be trapped forever within the initial viewport.

It’s a catch 22 situation and cannot be done like you have tried :slight_smile:

Remove all the height:100% from your code apart from the ones that are used for html and body.

Use min-height:100% on the first wrapper only.

You have one shot at creating a 100% initial layout and it all has to be done on that first wrapper. If you want the white background to travel down the page to the bottom then you would need to add a white background to the image that creates the borders.

e.g. This one:

http://joomla1.manor-road.ox.ac.uk/templates/thegreatii/images/background_1.gif

At present it has a gray background but if you changed it to white then it would travel to the bottom.

It actually seems to me that you are looking for a sticky footer effect and that is shown in this example.

Apologies If this was not what you were trying to do :slight_smile:

11

Hi All

Apologies, I left work early on Thursday because I was ill, and I wasn’t in the office on Thursday,

Thank you Paul o B for your help, that post completely explains why I kept going round in circles. I will apply your suggestion and see if it works.

Thanks to everyone for your help, I’m just off to lunch, but I’ll let you know afterwards what the results were.

12

Hi All

Just to update you.

I managed to get this working, as per the advice of Paul O B.

If anyone is interested, I found a very helpful tutorial at http://ryanfait.com/sticky-footer/

Thanks

Daniel

13

Ryan Fait’s sticky footer method - a method invented by Paul O’Brien over 7 years ago - is outdated. For the sake of cross-browser compatibility, this sticky footer version is much better supported.

14

As Kohoutek mentions breifly Ryan Faits sticky footer is broken badly in IE. He gave you the link to the most recent sticky footer and is very reliable and stable.

The problem with Ryan Faits is IE


.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}

He is trying to trick IE there. The sticky footer should not have a bottom margin (a top negative margin instead) and the only height/min-height rule there should be the min-height:100%.

Then Ie6 should be fed the height:100% via the star html hack (* html #element{height:100%;})

15

What I never liked about Ryan’s sticky footer was the addition of an empty div called “push”. It seemed no better than clearing divs.

[ot]

As Kohoutek mentions breifly Ryan Faits sticky footer is broken badly in IE. She gave you the link to the most recent sticky footer and is very reliable and stable.
Fixed : )[/ot]

16
Off Topic:

I knew that :).

THe .push element is unnecessary and is attributed to the bad way his sticky footer is set up. Had he done it correctly there would be no need for that extra element :slight_smile:

17

Exactly.

18

What I never liked was the fact that it never worked in IE7, IE8 and Opera :slight_smile:

19

I never used it; only looked at the code on the site… I never knew it didn’t work in all browsers!

20

I just looked at this post again, wasn’t expecting a flurry of responses!

I’ll change the css over, thanks for this note, to be honest it worked for me in IE8, thats just reminded me that I need to get back into the habit of testing earlier versions.

I’ve really appreciated everyones help and comments with this

Didcot84