how they do the background image act like that ?

marSoul · #1 (**permalink**) Nov 9th, 2007, 10:59

Hi guys,
i just surfing the new games sites, and suddenly see this game's site http://eu.rgtr.com/en/
if you see the background image is a large image file, but it only will scroll below 1024x768 resolutions but it will fit automatically for bigger resolutions, i just wonder how they do that ?
any idea ?

Stuart · #2 (**permalink**) Nov 10th, 2007, 01:38

Do you mean how the image stops even though the content continues? If that is the case, use this in your css:

Code: Select all

body {background: url(http://www.example.com/image.gif) no-repeat;}

What is in red will make the background appear only once.

If this is not what you are asking, could you clarify a bit please?

Cheers

Ross · #3 (**permalink**) Nov 10th, 2007, 08:47

I think he meant how do you make the image adjust to the resolution of the users computer screen without damaging the quality of it at high and low resolutions?

marSoul · #4 (**permalink**) Nov 10th, 2007, 10:35

i mean when u look at this site with resolution 1024x768, image will fit the window, but when u increase the resolution, for example wider the background image will fit again to the new resolution.
if u see the window wont scroll horizontally in 1024x768. and if u make the window wider the image will grow with it !

Daniel · #5 (**permalink**) Nov 10th, 2007, 11:16

The code they use is:

Code: Select all

body {
	background-image: url(/images/assets/shared/american-background.jpg);
	background-repeat: no-repeat;
	background-position: center 24px;
	background-color: #000000;
	font-family: Verdana, Arial;}

font-size: 101%

Marc · #6 (**permalink**) Nov 10th, 2007, 11:19

That wont make it 100% High and Wide though Dan...

Could this: http://www.webforumz.com/html-forum/...htm#post289298 be of any use?

marSoul · #7 (**permalink**) Nov 10th, 2007, 11:47

the question is how the image will fit with the resolution !? it wont scroll if u make window smaller...

Marc · #8 (**permalink**) Nov 10th, 2007, 11:51

It fits the screen at 100% so thats probably why it doesnt scroll when you make the window smaller...

Blake121 · #9 (**permalink**) Nov 10th, 2007, 18:17

I think it's because the image is 1900px wide. (http://eu.rgtr.com/images/assets/sha...round-home.jpg)

That way when the user expands there browser it's still big enough to fit in.

marSoul · #10 (**permalink**) Nov 10th, 2007, 18:24

why when we see it in lower resolution it wont scroll but below the 1024x768 will scroll horizontally ?

Lchad · #11 (**permalink**) Nov 10th, 2007, 19:06

I can't figure it out either. He has quite a few bits of javascript. Do you think Javascript is resizing this?

Edit: http://www.boutell.com/newfaq/creating/backgroundfill.html or
http://www.codelifter.com/main/javas...maximize.shtml

marSoul · #12 (**permalink**) Nov 10th, 2007, 19:18

i see that example but that will stretch the image to fit the window, but the one i have sent wont do that it is a large bg file that will fit to window, my guess is they use javascript with css or dom objects, but i dont know how !

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Fix background image in IE6	tenderfoot	Web Page Design	1	Jan 30th, 2008 11:02
background image not big enough	mykl	Web Page Design	7	Oct 11th, 2007 19:08
background image in a div	BumbleWeasle	Web Page Design	5	Oct 9th, 2006 12:37
Background image overlaping footer image at bottom of div	lw_d	Web Page Design	4	Mar 21st, 2006 00:27
Need help with my background image!!!	courtjester	Web Page Design	3	Sep 30th, 2003 15:25

		Webforumz.com > Community > Webforumz Cafe
how they do the background image act like that ?