Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7516
  • Last Modified:

Background images

I currently have my site load a background image using this code:

<style type="text/css">
<!--
body
{
  background-position: top;
  background-repeat: no-repeat;
  background-image: url("../Images/Background.jpg");  /*default image background*/
}

-->
</style>

Is it possible to make this image stretch to the full size of users screen rather that it just being the normal pixel size?  
0
sre22
Asked:
sre22
2 Solutions
 
NeoTekCommented:
Hi,

Unfortunately there is no way to do this with CSS.  Depending on your picture depends on how you can make it look "good".  You can set the background to repeat, use layers or make the image very big.  Could you please provide a link to your site  so I may explain the best possible method?

NeoTek
0
 
sre22Author Commented:
Unfortunately it is an Intranet so you won't have access to it.  The backgrounds fit a 1024x768 resolution but when using a larger resolution the image does not fill the screen.  I tried using a repeating background but it doesn't look right because the image just looks tiled.
0
 
sre22Author Commented:
how do the other options work that you were talking about (frames etc..)
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
klykkenCommented:
Background images never stretch :-/ That goes for any element unfortunately.

-klykken
0
 
sre22Author Commented:
Thanks..
0
 
danalmarCommented:
oups,
sorry to desagree, but you can use a JavaScript to strech it.
thanks to Massimo Foti !


<script language="JavaScript">
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "images/yourImage.jpg";
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (NS4) onresize = reDo;
if (IE4) onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;}
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);}
makeIm();
</script>
0
 
pmanseCommented:
It's doing exactly what I want/expect it to, but I'm getting an "object required" runtime error on the line: "winWid = (NS4) ? innerWidth : document.body.clientWidth;" I asked a developer who's better with JavaScript than i am if he'd take a look. He's questioning the imBG object and thinks I'm missing an include. Do you know what might be going on?
0
 
pmalatacCommented:
This script doesnt seem to run in navigator 7.1.  It works fin in IE6 though any suggestions??
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now