Website Background unable to stretch to bottom.

[stupidlammer]

The following code is from my actinic stylesheet.

/* begin general styles for all themes */
html,body {
	margin: 0px;
	padding: 0px;
	<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBackgroundColor%22%20%2f%3e%20%3d%3d%20True">
	background-color:<actinic:variable name="BGColor"/>;
	</actinic:block>
	<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBackgroundColor%22%20%2f%3e%20%3d%3d%20False">
	background-image: url("<actinic:variable name="BackgroundImageFileName" />");
	background-repeat: repeat-x;
	height: 100%;
   width: 100%;
   background-position: center
		</actinic:block>
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	color: <actinic:variable name="TextColor" />;
	font-size: <actinic:variable name="StandardFontSize" />;
}

the background image has a length of 1000px. How do i make it stretch till the bottom of a page? what code should i use?

ive tried: background-size= 100%; and height: 100%; width: 100%; , neither of which worked.

Thanks in advance for the help.

[pinbrook]

if the background is repeating why don't you make it 10px high and then repeat it?

[stupidlammer]

it is a colour gradient image, fade vertically from black to white. It is repeated horizontally. But i would like it to stretch to the bottom of page vertically.

[leehack]

Make it taller then.

[NormanRouxel]

Or google for background image stretch css.

[stupidlammer]

Or google for background image stretch css.

done it. read it. but unsure how to implement it into the above mentioned code. would really appreciate some assistance.

[completerookie]

one place to go is www.cssplay.co.uk
brilliant site, all document by righ clicking and looking at the source code
Its the first place I go tosee how to do anything with style.

[TraceyHand]

I've come across THIS as details of how to make the background image stretch and it's worked perfectly for me....in IE7 and FF2.
I can see from the code given on that website that, evidently, IE6 has issues with it and I've entered the IE6 bit into the overall layout (and tried in the stylesheet) but it doesn't seem to "fix" the problem (content appearing below background)

Is there something in the way that IF IE6 code is written that doesn't work with Actinic? I'm assuming so.
Does it work the same way as a blockif?
I can't seem to find a blockif condition to test for IE6, is that right?

If this isn't going to work...and let's face it, it needs to work with IE6 for a while yet, does anyone have any suggestions for an alternative that would work or do I need to find a different method of stretching the background?

Thanks

EDIT...never mind!! fixed it (sod's law!!)

used blockif with the condition IE6 ==TRUE and it worked!
w00t!!

[gabrielcrowe]

w00t!!

w0000000000t!

srry, got all excited. Whats the thread about again?

[TraceyHand]

w0000000000t!

srry, got all excited. Whats the thread about again?

not entirely sure!
I've been distracted by another thread about the size of someone's.......

well...anyways...

[TraceyHand]

ok..this is giving me another problem now

In Firefox.

I applied THIS METHOD to stretch my image and it works great, as I said.

However, I'm finding it's colouring my scrollbar in Firefox with my background and I can't seem to stop it.

Site is http://www.familyfriendlyworking.co.uk
(works here at home, if it goes to 1and1 holding page still, THIS will work )

Is there anything, in the method of stretching the background that I've used, that could cause it to overflow into the scrollbar and, can I fix it?

[peblaco]

I'm not seeing a scrollbar at all on Firefox, I am guessing it might be the html {overflow-y:hidden;} part, try temporarily removing that or other lines until you see what is causing the effect.

[TraceyHand]

I'm not seeing a scrollbar at all on Firefox,

that's the problem! although it IS scrolling, IYSWIM

I am guessing it might be the html {overflow-y:hidden;} part, try temporarily removing that or other lines until you see what is causing the effect.

I've pretty much run out of things to remove and test
tried removing that line (and various others in turn) and lost the background altogether (although did regain a scrollbar )

[TraceyHand]

hmmm..maybe you're right although their demo background doesn't overflow the scrollbar on their page.

Mind you, I have noticed that the overflow-y: hidden part of the code, while supposed to be only for IE6, appears in the code in FF too.

I have it in a blockif (as mentioned before) but it's obviously "ignoring" it and putting it there anyway.
I wonder if this is what is causing the problem and so, a further question then..

is there a blockif condition to test for a certain browser (in this case, IE6)

I used IE6 ==TRUE to display what is shown as an "if" in the code, and Actinic didn't object to the condition but is clearly ignoring it anyway.

Any ideas? Or do I live with the "invisible" scrollbar in FF?

[peblaco]

You can use a conditional comment for this http://www.quirksmode.org/css/condcom.html but this needs to be within the code of the page, not in a stylesheet.

But you could apply this around a <style> tag in the header of a site.