Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Backround image

  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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!!

    Plz give the sice for

    800 * 600
    1024 * 768
    1152 * 864
    1240 * 1024
    1600 * 1200
    Last edited by Wobbler; 07-02-2002 at 02:55 PM.

  • #2
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    paris, france
    Posts
    1,216
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    photoshop too expensive? use the GIMP! www.gimp.org

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    London
    Posts
    220
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "Imagination is more important than knowledge" A. Einstein's 'Twin Paradox'

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For all your background sizing problems...

    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>
    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •