Stretching a Background

*Destiny*

05-07-2011, 11:28 PM

**sigh**

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

[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> [code]

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

[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> [code]

which stretches the image, but takes ALL the game info on the page, 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.... )

I've attached pics to help explain.....

kenshn111

05-08-2011, 12:27 AM

Did you try using background-size:100% 100%; ?

*Destiny*

05-08-2011, 12:29 AM

Where in the first code would i put that?

I am not at all familiar with codes. I have NO idea how to put them together. :eek:

kenshn111

05-08-2011, 01:02 AM

Try this:
<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;
background-size:100% 100%
}
}</style> </font></h4><style type="text/css">table { color:#0000FF
!important}table,tr,td{ background: transparent !important; } a{
color:#00000!important}</style>
Not sure if that's what you're talking about >_<
If you stretch an image that is smaller than what you want it to be, it would look terrible.

*Destiny*

05-08-2011, 01:54 AM

Thank you!!! -- Again!! :)

i will try that code. If you are able to look at the screen shots attached in the above thread. You'll see the difference between the repeat, and the stretched picture. As long as i keep the size similar the "stretching" shouldn't be that bad.

I've tried changing the size of the picture but it still repeats and looks horrible (i don't like the repeat)

*Destiny*

05-08-2011, 01:57 AM

THAT WORKED BRILLIANTLY!!!!!!!

Thank you SO very much!!!!!!!!

I've also thanked you for the post!!! REALLY REALLY appreciate your help!!! :)

kenshn111

05-08-2011, 03:11 AM

Oh! Glad I could help!
You could also changing the value of your background-repeat from repeat to no-repeat.
background-repeat:repeat;to
background-repeat:no-repeat;
:)