Help - Search - Members - Calendar
Full Version: Stretching a Background Image
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
*Destiny*
ok here's the deal.

I'm on a site (a game) where they allow you to change your background image... BUT they have game info on your "profile" page about stats and other game info...

I've figured out how to use HTML to change my background image using this code....

<style type="text/css">
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-image:url('http://photobucketimage.com');
background-attachment: fixed;
background-position:center center;
background-repeat:repeat;
}
}</style> </font></h4><style type="text/css">table { color:#0000FF
!important}table,tr,td{ background: transparent !important; } a{
color:#00000!important}</style>

But that code doesn't allow the image to stretch... then i found this code...

<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
<body>
<img src="www.imageurl.com" alt="background image" id="bg" />
</body>

which stretches the image, but takes ALL the game info on the pate, When i pull up my profile ONLY the image shows.


if someone could tell me how to combine the 2 codes so that all the stuff comes up that would be GREAT! (hopefully i made sense.... )



Darin McGrew
CSS3 may allow background images to be stretched, once browsers support it:
http://www.w3.org/TR/css3-background/
*Destiny*
Ok, Thank you!

Doest that mean it currently can't be done?
*Destiny*
Ok so i tried to combine the 2 and it didn't work...

<html>
<head>
<style type="text/css">table, tr, td { background-color:transparent; border:none; border-width:0;}
body
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
</style> </font></h4><style type="text/css">table { color:#0000FF
!important}table,tr,td{ background: transparent !important; } a{
color:#00000!important}</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="http://imageure.gif"></div>
<div id="content">

</div>
</body>
</html>


And now, the picture is normal size and OVER the game webpage instead of as a background image

pandy
What you can do, today, is to stretch a normal inline image and position it behind the rest of the content. Typically you set the width to 100% (CSS or HTML matters not) and let the browser scale the image. It will keep the aspect ratio.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.