Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

stretching background?

Status
Not open for further replies.
darkprince

darkprince

Programmer
Jun 4, 2002
165
AU
hey

i sware i asked like the same question as this ages ago but i couldn't find it when i went looking so...

i was wondering if i could make it so my background pic that's 1024 pixels wide could expand and contract to fit the different screen sizes.

ciao
 
Sort by date Sort by votes
all i can say is that stretching images looks ugly [soapbox]
sleep is good
 
Upvote 0 Downvote
yes it does.
on that note there's another option you have regarding getting the res. on the results of that you can load a certain image for each reslolution.
ie
if 1024* load background1024.gif

That sounds like the best option for making things look bgood I dare to learn more
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
hey

the image i'm using won't look ugly, its not really a 1024x1 pixel image that'll repeat itself to form the background and just has some shading on it.

and that code you just gave me? where would i put that? in the body tag or something?

ciao
 
Upvote 0 Downvote
umm that script doesn't work for me, it does nothing and I'm putting it in right? any ideas?

ciao
 
Upvote 0 Downvote
hmm.. well I copy/pasted the script and added a image to it and it seems to be working well here. Can you post the code?
if it helps here is mine which is exactly like the links.
<html>

<head>
<script type=&quot;text/javascript&quot;>
<!--
//code from Nik Haldimann Web Developer, xmedia
//http:function winWidth() {
if (self.innerWidth)
return self.innerWidth;
else if (document.documentElement &&
document.documentElement.clientWidth)
return document.documentElement.clientWidth;
else if (document.body)
return document.body.clientWidth;
}
function winHeight() {
if (self.innerHeight)
return self.innerHeight;
else if (document.documentElement &&
document.documentElement.clientHeight)
return document.documentElement.clientHeight;
else if (document.body)
return document.body.clientHeight;
}
// -->
</script>
</head>

<body>

<div id=&quot;background&quot; style=&quot;position: absolute; top: 0px; left: 0px&quot;>
<script type=&quot;text/javascript&quot;>
<!--
if (winWidth() && winHeight()) { // this test necessary for browsers not
//returning screen dimensions
document.write('<img src=&quot;6.gif&quot; width=&quot;' + winWidth() + '&quot;height=&quot;' + winHeight() + '&quot;>');
}
// -->
</script>
</div>

<div id=&quot;content&quot; style=&quot;position: absolute; top: 0px; left: 0px&quot;>
The rest of the page goes here.
</div>

</body>

</html> I dare to learn more
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
here's my whole code so far







<html>
<head><title>Corrupt Saiyan</title>
<script type=&quot;text/javascript&quot;>
<!--
function winWidth() {
if (self.innerWidth)
return self.innerWidth;
else if (document.documentElement &&
document.documentElement.clientWidth)
return document.documentElement.clientWidth;
else if (document.body)
return document.body.clientWidth;
}
function winHeight() {
if (self.innerHeight)
return self.innerHeight;
else if (document.documentElement &&
document.documentElement.clientHeight)
return document.documentElement.clientHeight;
else if (document.body)
return document.body.clientHeight;
}
// -->
</script>
</head>




<style>
A:link {COLOR: #808080; TEXT-DECORATION: none}
A:visited {COLOR: #808080; TEXT-DECORATION: none}
A:hover {COLOR: #c0c0c0; TEXT-DECORATION: none}
A:active {COLOR: #808080; TEXT-DECORATION: none}
</style>





<body background=&quot;bgline.jpg&quot; text=&quot;#808080&quot;>
<div id=&quot;background&quot; style=&quot;position: absolute; top: 0px; left: 0px&quot;><script
type=&quot;text/javascript&quot;><!--
if (winWidth() && winHeight()) { // this test necessary for browsers not
returning screen dimensions
document.write('<img src=&quot;bgline.jpg&quot; width=&quot;' + winWidth() + '&quot;
height=&quot;' + winHeight() + '&quot;>');
}
// --></script></div>




<div id=&quot;content&quot; style=&quot;position: absolute; top: 0px; left: 0px&quot;>

<span style=&quot;position: absolute; left: 40; top: 101&quot;>
<table border=&quot;1&quot; width=&quot;101%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; height=&quot;500&quot;>
<tr>






<td width=&quot;20%&quot; valign=&quot;top&quot;><font size=1 face=&quot;TAHOMA&quot;>
<font size=1 face=&quot;VERDANA&quot;>NAVIGATION-</font><br>



<a href=&quot;&quot;>cool</a>

</td>





<td width=&quot;60%&quot; valign=&quot;top&quot;><font size=1 face=&quot;TAHOMA&quot;>
<font size=1 face=&quot;VERDANA&quot;>NAVIGATION-</font><br>

cool


</td>





<td width=&quot;20%&quot; valign=&quot;top&quot;><font size=1 face=&quot;TAHOMA&quot;>
<font size=1 face=&quot;VERDANA&quot;>NAVIGATION-</font><br>

cool


</td>





</tr>
</table>


</div>


</body>
</html>
 
Upvote 0 Downvote
try formatting it so the tags do not get cut into multiple lines.
also the main reason is this on why it is not working
<script type=&quot;text/javascript&quot;>
is incorrect. it is
<script language=&quot;javascript&quot;>

I dare to learn more
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
try this, do me a favor andf leave the reference to where the script cam efrom in it. most of it was jsut positional issues like where your style tags were. just change the image to a valid image on your machine
<html>

<head>
<style>
A:link {COLOR: #808080; TEXT-DECORATION: none}
A:visited {COLOR: #808080; TEXT-DECORATION: none}
A:hover {COLOR: #c0c0c0; TEXT-DECORATION: none}
A:active {COLOR: #808080; TEXT-DECORATION: none}
</style>
<script language=&quot;javascript&quot;>
<!--
//code from Nik Haldimann Web Developer, xmedia
//http:
function winWidth() {
if (self.innerWidth)
return self.innerWidth;
else if (document.documentElement &&
document.documentElement.clientWidth)
return document.documentElement.clientWidth;
else if (document.body)
return document.body.clientWidth;
}
function winHeight() {
if (self.innerHeight)
return self.innerHeight;
else if (document.documentElement &&
document.documentElement.clientHeight)
return document.documentElement.clientHeight;
else if (document.body)
return document.body.clientHeight;
}
// -->
</script>
</head>

<body>

<div id=&quot;background&quot; style=&quot;position: absolute; top: 0px; left: 0px&quot;>
<script language=&quot;javascript&quot;>
<!--
if (winWidth() && winHeight()) { // this test necessary for browsers not
//returning screen dimensions
document.write('<img src=&quot;6.gif&quot; width=&quot;' + winWidth() + '&quot;height=&quot;' + winHeight() + '&quot;>');
}
// -->
</script>
</div>

<div id=&quot;content&quot; style=&quot;position: absolute; top: 0px; left: 0px&quot;>
<table border=&quot;1&quot; width=&quot;101%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; height=&quot;500&quot;>
<tr>
<td width=&quot;20%&quot; valign=&quot;top&quot;><font size=1 face=&quot;TAHOMA&quot;>
<font size=1 face=&quot;VERDANA&quot;>NAVIGATION-</font><br>
<a href=&quot;&quot;>cool</a>
</td>
<td width=&quot;60%&quot; valign=&quot;top&quot;><font size=1 face=&quot;TAHOMA&quot;>
<font size=1 face=&quot;VERDANA&quot;>NAVIGATION-</font><br>
cool
</td>
<td width=&quot;20%&quot; valign=&quot;top&quot;><font size=1 face=&quot;TAHOMA&quot;>
<font size=1 face=&quot;VERDANA&quot;>NAVIGATION-</font><br>
cool
</td>
</tr>
</table>
</div>

</body>

</html> I dare to learn more
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
hey

sorry for the late reply but i had to go to umm.. *cough*school*cough* oh dam im embarrised but i also wasted your time unfortunately because just before i had to go i just tidied up my page and it worked, sorry for wasting your time but the only problem is that if the page isn't at full screen when you open it and then you maximise the window then only the original window sized square of background is left. to get around this i could make it in a popup window but im not doing that or maybe a message on my intro page like &quot;Please ensure this window is maximised&quot; or something like this?

ciao
 
Upvote 0 Downvote
you can set the screen to maximize onLoad.
self.moveTo(0,0);
self.resizeTo(self.screen.width, self.screen.height);

just place this in a function and call it when the page loads.

*cough*school*cough* oh dam im embarrised
That is absolutely nothing to be embarrised about. I hope not anyway cause I'm in school (again) and hope to be for a long time. In this field you will learn it's part of the game to keep learning. I dare to learn more
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
hey

thanks again can you tell me exactaly how to put it in as ive never delt with this b4, ive only being doing the basics but im ganna start getting into javascript and all that pretty soon, thx

ciao
 
Upvote 0 Downvote
create a function
function maxWindow() {
self.moveTo(0,0);
self.resizeTo(self.screen.width, self.screen.height);
}

now simply call it in the onLoad event in the body tag

<body onLoad=&quot;maxWindow()&quot;>

I dare to learn more
admin@onpntwebdesigns.com
 
Upvote 0 Downvote
hey

thanks ill try that soon but i have to go to school so ill post back in tomorrow

ciao
 
Upvote 0 Downvote
hey

no it didn't work? where do i put the function and do i put it in anything? okay if i shouldn't be embarrised about being at school now then i should be embarrised about being so bad at this...

ciao
 
Upvote 0 Downvote
Ok, heres the standard layout for an html file:
Code: 
<html>
<head>
<!-- Meta Tags, Title Tag, Script tags, style tags, etc -->
</head>
<body>
<!-- Content to screen -->
</body>
</html>

So in this case your script will go in the head section between script tags, like in onpnt's example:
Code: 
<head>
<style>
A:link {COLOR: #808080; TEXT-DECORATION: none}
A:visited {COLOR: #808080; TEXT-DECORATION: none}
A:hover {COLOR: #c0c0c0; TEXT-DECORATION: none}
A:active {COLOR: #808080; TEXT-DECORATION: none}
</style>
<script language=&quot;javascript&quot;>
&lt;-- Script start tag

Then alter your body tag in onpnt's example above:
Code: 
<body onLoad=&quot;maxWindow()&quot;>

Hope that helps
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
133
1DMF
1DMF
csphard
  • Locked
  • Question
need help with footer h3 background-color. 2
Replies
8
Views
269
vacunita
vacunita
yaknowss
  • Locked
  • Question
Create divs with different background colors
Replies
1
Views
116
ChrisHirst
ChrisHirst
antonyx6666
  • Locked
  • Question
background image as page width
Replies
3
Views
105
antonyx6666
antonyx6666

Part and Inventory Search

Sponsor

Back
Top