[SOLVED] Expandable Background

ggormsen · 07-02-2009, 03:21 PM

Hello,
I have a small problem with the site I am building.
http://gcgcg.com/besttest/index.html
http://gcgcg.com/besttest/code/best.css
I will be putting it onto the main site when I am finished with it.

I need the div background image to
A) Resize (I solved that)
B) Get longer when there is a lot of content, or a small screen that cannot fit the content in it.

Also, if anyone knows how to make text scale in size, I would really appreciate that code as well.
Thanks!

FredT · 07-02-2009, 04:09 PM

That images/bordersback/backgroundgradient_03.jpg image is perfect to be tiled. For that whole table where all the ab ab ab's are, use:

style="background-image: url(images/bordersback/backgroundgradient_03.jpg); background-repeat: repeat-y;"

in the tag. Take away that <img src="images/bordersback/backgroundgradient_03.jpg"> with the 100% width and height.

Does this make sense to you?

Also, your buttons are really messed up on Safari. Screenshot attached.

ggormsen · 07-02-2009, 04:19 PM

Thank you but that won't quite work.
The reason that I have the image widened instead of using a background is because I want it to look the same in all resolutions. Right now, it looks exactly the same in 800x600 as it does in 2048x1024 (except for the text, which I need to figure out how to auto-scale text)

FredT · 07-04-2009, 01:05 PM

Hmm, I'm having trouble thinking of an HTML/CSS solution right now... are you open to using Javascript?

ggormsen · 07-05-2009, 02:30 PM

sure, I'm open to anything.

**ahmorrow** · 07-05-2009, 08:23 PM

window.screen.availWidth

This property gets the users current screen width. Use this in an if statement. Say the width is 2048 you can set the pages font to be larger than the one already made for 800x600

HINT: You can use the operators below to make the font size increase automatically (if they have an odd screen resolution like 4096x???).

if(screen.availWidth > 800)
{code here;}

>
<
>=
<=

**ahmorrow** · 07-05-2009, 08:29 PM

Accidental posting of the same thing... I swear this NEVER happens ;-)

FredT · 07-06-2009, 08:42 AM

Let me know if this works for you:

Step 1: Paste the following script in the head of your document:

Code:

<script type="text/javascript">
function resizeBackground(){
	var content = document.getElementById('table');
	var backimg = document.getElementById('backimg');
	if (longdiv.style.pixelHeight) {
		backimg.height = longdiv.style.pixelHeight;
	} else {
		backimg.height = longdiv.offsetHeight;
	}
}
</script>

Step 2: Add onresize="resizeBackground()" to the <body> tag:

Code:

<body onresize="resizeBackground()" onload="MM_preloadImages('images/menubuttons/buttonson_01.png','images/menubuttons/buttonson_02.png','images/menubuttons/buttonson_03.png','images/menubuttons/buttonson_04.png','images/menubuttons/buttonson_05.jpg','images/menubuttons/buttonson_06.jpg')">

Step 3: Change the <img> tag for the background image to:

Code:

<div id="backgrad"><img src="images/bordersback/backgroundgradient_03.jpg" width="100%" id="backimg" /></div>

Good luck!

**ahmorrow** · 07-06-2009, 11:29 PM

Oh sure, Freddy just HAS to outdo me ;-) lol

FredT · 07-23-2009, 01:44 PM

Woops, just realized this won't work... if you ever come back to this.

The following script is correct.

Code:

<script type="text/javascript">
function resizeBackground(){
	var content = document.getElementById('table');
	var backimg = document.getElementById('backimg');
	if (content.style.pixelHeight) {
		backimg.height = longdiv.style.pixelHeight;
	} else {
		backimg.height = longdiv.offsetHeight;
	}
}
</script>

Followed the link and it looks like you gave up on the background anyway.

ggormsen · 07-23-2009, 02:01 PM

Thanks!
We ended up going another direction because I just couldn't make anything work.
Thank you everyone for your time

**ahmorrow** · 07-23-2009, 02:01 PM

I compliment you and what do you do Freddy? This is unacceptable! I want your junior detective badge on my desk in 5 minutes! This is an outrage I tell ya, an outrage! lol

07-02-2009, 03:21 PM	#1 (permalink)
ggormsen Registered User Join Date: Nov 2008 Location: Phx AZ USA Posts: 38 OS: XP SP3 / Vista Ult Home x86 My System	[SOLVED] Expandable Background Hello, I have a small problem with the site I am building. http://gcgcg.com/besttest/index.html http://gcgcg.com/besttest/code/best.css I will be putting it onto the main site when I am finished with it. I need the div background image to A) Resize (I solved that) B) Get longer when there is a lot of content, or a small screen that cannot fit the content in it. Also, if anyone knows how to make text scale in size, I would really appreciate that code as well. Thanks!

07-02-2009, 04:19 PM	#3 (permalink)
ggormsen Registered User Join Date: Nov 2008 Location: Phx AZ USA Posts: 38 OS: XP SP3 / Vista Ult Home x86 My System	Re: Expandable Background Thank you but that won't quite work. The reason that I have the image widened instead of using a background is because I want it to look the same in all resolutions. Right now, it looks exactly the same in 800x600 as it does in 2048x1024 (except for the text, which I need to figure out how to auto-scale text)

07-04-2009, 01:05 PM	#4 (permalink)
FredT Registered User Join Date: Nov 2007 Posts: 388 OS: Mac OS X 10.5.7 and XP SP2	Re: Expandable Background Hmm, I'm having trouble thinking of an HTML/CSS solution right now... are you open to using Javascript?

07-05-2009, 02:30 PM	#5 (permalink)
ggormsen Registered User Join Date: Nov 2008 Location: Phx AZ USA Posts: 38 OS: XP SP3 / Vista Ult Home x86 My System	Re: Expandable Background sure, I'm open to anything.

07-05-2009, 08:23 PM	#6 (permalink)
ahmorrow God (TSF Enthusiast) Join Date: May 2009 Location: Jeffersonville, IN Posts: 678 OS: Ubuntu 9.04 [Jaunty Jackalope] My System	Re: Expandable Background window.screen.availWidth This property gets the users current screen width. Use this in an if statement. Say the width is 2048 you can set the pages font to be larger than the one already made for 800x600 HINT: You can use the operators below to make the font size increase automatically (if they have an odd screen resolution like 4096x???). if(screen.availWidth > 800) {code here;} > < >= <=

07-05-2009, 08:29 PM	#7 (permalink)
ahmorrow God (TSF Enthusiast) Join Date: May 2009 Location: Jeffersonville, IN Posts: 678 OS: Ubuntu 9.04 [Jaunty Jackalope] My System	Re: Expandable Background Accidental posting of the same thing... I swear this NEVER happens ;-) Last edited by ahmorrow; 07-05-2009 at 08:30 PM. Reason: Stupid thing posted twice lol

07-06-2009, 11:29 PM	#9 (permalink)
ahmorrow God (TSF Enthusiast) Join Date: May 2009 Location: Jeffersonville, IN Posts: 678 OS: Ubuntu 9.04 [Jaunty Jackalope] My System	Re: Expandable Background Oh sure, Freddy just HAS to outdo me ;-) lol

07-23-2009, 01:44 PM	#10 (permalink)
FredT Registered User Join Date: Nov 2007 Posts: 388 OS: Mac OS X 10.5.7 and XP SP2	Re: Expandable Background Woops, just realized this won't work... if you ever come back to this. The following script is correct. Code: <script type="text/javascript"> function resizeBackground(){ var content = document.getElementById('table'); var backimg = document.getElementById('backimg'); if (content.style.pixelHeight) { backimg.height = longdiv.style.pixelHeight; } else { backimg.height = longdiv.offsetHeight; } } </script> Followed the link and it looks like you gave up on the background anyway. Last edited by FredT; 07-23-2009 at 01:46 PM.

07-23-2009, 02:01 PM	#11 (permalink)
ggormsen Registered User Join Date: Nov 2008 Location: Phx AZ USA Posts: 38 OS: XP SP3 / Vista Ult Home x86 My System	Re: Expandable Background Thanks! We ended up going another direction because I just couldn't make anything work. Thank you everyone for your time

07-23-2009, 02:01 PM	#12 (permalink)
ahmorrow God (TSF Enthusiast) Join Date: May 2009 Location: Jeffersonville, IN Posts: 678 OS: Ubuntu 9.04 [Jaunty Jackalope] My System	Re: Expandable Background I compliment you and what do you do Freddy? This is unacceptable! I want your junior detective badge on my desk in 5 minutes! This is an outrage I tell ya, an outrage! lol