CodingForums.com - Backround image

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Backround image (http://www.codingforums.com/showthread.php?t=1215)

Wobbler

07-02-2002 01:43 PM

Backround image

Hello all!

I'm making a website, and at the index it redirect different resulution users to different pages. But when i insert the background image it doesn't fit!!!

I've done the bg image in Adobe Photoshop 7.0, for ex. 1600 * 1200 in adobe don't fit the screen in explorer. What size is it in explorer please help me!!:confused:

Plz give the sice for

800 * 600
1024 * 768
1152 * 864
1240 * 1024
1600 * 1200

Bomu	07-02-2002 02:14 PM

That's 'cos you have to take into account that browser windows have tool bars, address bars etc along the tops and bottoms, which means a window will never be at full size (even with F11).

I suggest you click Print Screen, paste onto a new Photoshop layer, crop out the tool bars and then look at the image size - then you'll find out the window size!
Sorry I don't know a quicker way to do this, but everyone's browser windows will vary.

whackaxe

07-02-2002 02:39 PM

you should make the image huge (like 1600*1200) and then have this at the top of you page

<script>

function changepicsize()
{
backg.width = screen.availWidth;
backg.height = screen.availheight;
}
</script>

<body onload="changepicsize()">
<img name="backg" src="back.gif" style="position: absolute; top:0px; left: 0px;z-index:2;">
<div style="z-index:1;">
the rest of the page
</div>

this isnt very good if your page is a dhtml intensive page

murphyz

07-02-2002 02:55 PM

and if you want the image hit the edge of the screen without the little white border put these in the <body>tag

topmargin="0"
bottommargin="0"
rightmargin="0"
leftmargin="0"

or you can use just one or two of them, i.e.

<body bgcolor="#000000" topmargin="0" bottom margin="0">

blah blah blah

</body>

Mxx

Quiet Storm

07-02-2002 05:27 PM

For all your background sizing problems... :D

Use this code:

<HEAD>

<SCRIPT>
NS4 = (document.layers);
IE4 = (document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "your-image.jpg";
if (NS4) window.onload = setResize;
function setResize(){
setTimeout("window.onresize=reDo;",500);
}
function reDo(){
window.location.reload()
}
if (IE4) window.onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;
}
function makeIm() {
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = "<DIV ID=elBGim"
+ " STYLE='position:absolute;left:0;top:0;z-index:-1'>"
+ "<IMG NAME='imBG' BORDER=0 SRC=" + imSRC;
if (scaleWidth) imStr += " WIDTH=" + winWid;
if (scaleHeight) imStr += " HEIGHT=" + winHgt;
imStr += "></DIV>";
document.write(imStr);
}
</SCRIPT>

</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript1.2">
makeIm();
</SCRIPT>

... the rest of your content...

</BODY>

All times are GMT +1. The time now is 07:58 AM.