How do they get the background like this ... ? - Graphic Design Forum and Web Design Forum

PolarBear · #1 (**permalink**) 11-07-2007, 01:31 PM

Hello I would like to know how they get the background like this:

Gametrailers.com - Transformers: The Game - Opening Cinematic HD

It seems seamless and where one side is not the same as the other, I would really like to create a design like this but not have it distracting for the viewer ?

Mack · #2 (**permalink**) 11-07-2007, 01:39 PM

http://www.gametrailers.com/images/w...e3_panels3.jpg

Its one big image.

PolarBear · #3 (**permalink**) 11-07-2007, 02:32 PM

I'm not too sure I would even use a techniqe like this, but how come on pages when you resize a window the image gets scalled down, how is this done (especially a background image like this) ?

And did they create the image at a set resolution ?

Mack · #4 (**permalink**) 11-07-2007, 02:55 PM

The image is a set size, and they are tiling it on the Y. they have made the background image seamless on the top and bottom.

tommylogic · #5 (**permalink**) 11-07-2007, 03:08 PM

Here's the CSS way to do it..

HTML Code:

<head>
<style type="text/css">
html { height: 100%; overflow:hidden;}
img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: white; }
#content  {overflow: auto; background-image: url(images/transparent.png); }
 
</style>
</head> 
<body id="name">
<img id="background" src="../images/your_image.jpg" alt="Background-image" />
<div id="content">
          <p>Your content here</p>
     </div>
</body>
</html>

Denis Wonder · #6 (**permalink**) 12-07-2007, 07:16 AM

Is it works correctly on all browsers?

PolarBear · #7 (**permalink**) 12-07-2007, 10:06 AM

Oh CSS, ok thank you.

Mack · #8 (**permalink**) 12-07-2007, 11:02 AM

let us know how it works out for you.

PolarBear · #9 (**permalink**) 12-07-2007, 11:37 AM

Alright will do, it will be a while since I have to plan some other stuff out. If I run into any problems will post :)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How can this background be done?	Riz	Graphic Design and Web Design Help	5	11-03-2008 01:11 AM
Background Help	LindsySaporta	Graphic Design Forum	3	13-01-2008 10:32 AM
Background image	jwade_m	Graphic Design and Web Design Help	10	03-11-2007 03:25 PM
Background	hbixler03	CSS Forum	5	06-07-2007 06:57 PM