Background Image Scaling

by Padraig April 19th 2010, 5:16 pm

Greetings,

I need help scaling my background so it takes up 100% of the page's width and height rather than the tiling/repeat effect. Link below to further explain:

http://www.mgoforums.net/League-h1.htm

Can someone inform me of how to do this please?

by Guest April 19th 2010, 5:27 pm

I have edited your page !

Code:: <html> <head> </head> <title></title> <style type='text/css'> html, body { height: 1000px; } body { background-image: url('http://i69.servimg.com/u/f69/13/69/84/20/html_b11.jpg'); background-repeat: no-repeat; } </style> <body> <table color=" " width="75%" border="0"><tr><td><table border="1" cellpadding="1" cellspacing="0" width="100%"> <td align="center">Rank <td align="center">Team Name</td> <<td align="center">Played</td> <td align="center">Won</td> <td align="center">Lost</td> <<td align="center">Points</td></tr> <tr> <td align="center">1.<td align="center">Flawless</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr><td align="center">2.<td align="center">Peace of Mind</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr><td align="center">3. <td align="center">Philanthropy Black Ops.</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr><td align="center">4. <td align="center">Potential</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr><td align="center">5. <td align="center">Revolution</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">6. <td align="center">Shangri La</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">7.<td align="center">Skys The Limit</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">8. <td align="center">The Rebellion</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">9. <td align="center">To The Max</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">10. <td align="center">VDP</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr></table></td></tr></table> </body> </html>

I hope that what you wantedn :wouhou:

by Padraig April 19th 2010, 5:43 pm

That is exactly what I wanted but the size of the background still remains not the full size :S

http://www.mgoforums.net/League-h1.htm

Thanks very much for your help

by Guest April 19th 2010, 5:48 pm

you want to magnify the image or put it on center ?

by Padraig April 19th 2010, 5:49 pm

Magnify the image so it is the full size of the screen. height: 100%; width: 100%; Embarassed

by Guest April 19th 2010, 5:59 pm

The image is small, and if we great , it will see faint ! Sad

by Padraig April 19th 2010, 6:02 pm

Thanks very much for your help again. I am only testing with this image, If it faints the color I don't mind :]

by Guest April 19th 2010, 6:04 pm

Code:: <html> <head> </head> <title></title> <style type='text/css'> body { background: url('http://i69.servimg.com/u/f69/13/69/84/20/html_b11.jpg') no-repeat; background-size: 6000%; } </style> <body> <table color=" " width="75%" border="0"><tr><td><table border="1" cellpadding="1" cellspacing="0" width="100%"> <td align="center">Rank <td align="center">Team Name</td> <<td align="center">Played</td> <td align="center">Won</td> <td align="center">Lost</td> <<td align="center">Points</td></tr> <tr> <td align="center">1.<td align="center">Flawless</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr><td align="center">2.<td align="center">Peace of Mind</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr><td align="center">3. <td align="center">Philanthropy Black Ops.</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr><td align="center">4. <td align="center">Potential</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr><td align="center">5. <td align="center">Revolution</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">6. <td align="center">Shangri La</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">7.<td align="center">Skys The Limit</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">8. <td align="center">The Rebellion</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">9. <td align="center">To The Max</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr> <tr> <td align="center">10. <td align="center">VDP</td> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td><td align="center">0</td> </tr></table></td></tr></table> </body> </html>

I enlarged the picture but do not see very clearly Sad

you need a larger image

by Padraig April 19th 2010, 6:17 pm

The image stays at the same size even with your new code

http://www.mgoforums.net/League-h1.htm

Crying or Very sad

by Guest April 19th 2010, 6:24 pm

Look how I see your page :

background - Background Image Scaling 2dgkt3l

you need a larger image Very Happy

by Padraig April 19th 2010, 6:32 pm

Why do both see the image having different sizes?

background - Background Image Scaling Images10

by Guest April 19th 2010, 6:39 pm

I think because of your browser Sad

if you put a larger image, will solve the problem

by Padraig April 19th 2010, 6:52 pm

I have trebled the size of the image using photoshop and it still comes out the same size. I tested this with Internet Explorer also and the same size comes out. This is really confusing me, sorry about this.