• 0

Stretching background image

Asked by configure,

 Share

Question

Grand Master

configure Veteran

Posted
  • Veteran
Posted

Hi :p

I'm working on my site, and I was wondering if there's anyway that I can stretch my background image. Here's the code that I've tried, and unfortunately, it's not working.. Maybe I'm missing something, take a look..

<pre>

<body link="#808000" vlink="#808000" alink="#808000" text="#FFFFFF" bgcolor="#002E5B" topmargin="0" leftmargin="0">

<DIV ID="bgimage" style="position:absolute;visbility:hidden">

<script LANGUAGE="JavaScript">

<!--

// add the URL of your image

var myImage="file://C:My FilesMy Homepagebackground.jpg"



// do not edit the variables below

var preload_myImage=new Image()

preload_myImage.src=myImage



function stretchimage() {

if (document.layers) {

var screenwidth=window.innerWidth

var screenheight=window.innerHeight

document.bgimage.document.write("<img src="+myImage+" width="+screenwidth+" height="+screenheight+">")

document.bgimage.document.close()

document.bgimage.left=0

document.bgimage.top=0 

                document.bgimage.visibility="visible" 

        }

if (document.all) {

        var screenwidth=document.body.clientWidth

        var screenheight=document.body.clientHeight

bgimage.innerHTML="<img src="+myImage+" width="+screenwidth+" height="+screenheight+">"

document.all.bgimage.style.posLeft=0

document.all.bgimage.style.posTop=0

                document.all.bgimage.style.visibility="visible" 

        }

}

//-->

</script>

</div>



</body></pre>

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Rookie

ebinfo

Posted
Posted

My opinion is that it's not possible to make a backgroud image dynamically stretch. Even with the use of CSS.

I know you can set it to me shown once, or have it tiled. but after more than 8 years of HTML i don not think it's possible to do that.

Plus the code you've pasted in there

1 ) will not show your image because "visbility:hidden" makes it invisible to the user, and even then you have a mistake, it should be "visibility: hidden"

2 ) if it was to be visible, having it set as position:absolute would make it stand ABOVE the page content (everything would be "below" the image).

Only way to have a background image is either with

OR through CSS

body {

background-image: url("whatever.jpg");

}

but again it can't be stretched to fit the user window. Or what you can so is take an image that once tiled looks as one image (the patterns follows themselves or whatever).

Link to comment
Share on other sites
  • 0
Collaborator

digital.death

Posted
Posted 

<pre><html>

 <head>

  <title>

   My Page

  </title>

 </head>

 <body style="background-color : black;">



  <div style="position : absolute; left : 0px; top : 0px; z-index : 0;">

   <script>

    // Type the URL of the Image Here:

    var myImage="back.jpg";



    // Get the Available Screen Width and Height

    var screenwidth=document.body.clientWidth;

    var screenheight=document.body.clientHeight;



    // Create the Image

    document.write('<img src="' + myImage + '" width="' + screenwidth + '" height= "' + screenheight + '" alt=".">');

   </script>

  </div>



  <div style="position : absolute; left : 0px; top : 0px; z-index : 1;">

   Content Goes Here

  </div>



 </body>

</html></pre>

;)

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.