Another "How'd They Do That?" question

autumn_whispers2me · #1 (**permalink**) May 2nd, 2005, 17:25

..inspired by Sirkent's post with all the links for sites with great design.

Okay, some of the sites I visited on the list in Sirkent's post made start thinking (again) about those pages that have what appears to be ONE background image covering the entire screen. Question is (you got it): "How'd they do that?"

So... how did they?

...without making anyone's pc crash with the file size. :wink:

D3mon · #2 (**permalink**) May 2nd, 2005, 18:00

any examples?

Webforumz Staff · #3 (**permalink**) May 2nd, 2005, 19:38

I must be going slightly nuts because I don't remember making the post!

Sorry I've been revising for exams so I'm a little crazy atm!

benbacardi · #4 (**permalink**) May 2nd, 2005, 19:54

use an image that can be tiled, and use css in the body tag:

Code: Select all

<body style="background-image:url(image.jpg);background-repeat:repeat">

that will repeat the background

autumn_whispers2me · #5 (**permalink**) May 2nd, 2005, 20:13

For some weird reason I can't find the original post now. Weird.

But it was basics about design, etc., and there was a list of web sites that have links to 'the best' web sites out there.

I've used the style code for fixed backgrounds, but the file size ends up huge, and if I reduce the file size enough to be acceptable the image quality looks awful.

Some of the sites I visited were:

http://www.rustboy.com
http://www.code23.com
http://www.2advanced.com
http://www.curiousmedia.com
http://www.m2photo.ca

http://www.pixelranger.com appears to have the image covering the entire page. But a great example is at http://www.billybussey.com

Off the top of my head... but there were a LOT of sites on the list on that site. I can't remember which of the above has a background image that covers the entire page.

benbacardi · #6 (**permalink**) May 2nd, 2005, 20:38

the sites with what appears to be a gradient covering the whole background is actually just a two or three pixel wide gradient repeated horizontally. for example, this is the picture that is used on www.code23.com:

JohnMitch · #7 (**permalink**) May 3rd, 2005, 01:47

Actually what most of them do is they take a large image and they "splice" it. This makes the 1 250KB image 25 10kb images. Or whatever, also the gradients can be done like ben said.

autumn_whispers2me · #8 (**permalink**) May 3rd, 2005, 22:22

Ah, okay. I use sliced images a lot, but they don't work too well for gradients. lol

autumn_whispers2me · #9 (**permalink**) May 4th, 2005, 22:42

Sirkent, did you see where I bumped that post in reference to this one, the post you couldn't remember making? 8)

benbacardi · #10 (**permalink**) May 5th, 2005, 16:31

it was actually catalyst which made the original post...

autumn_whispers2me · #11 (**permalink**) May 5th, 2005, 16:41

Oh good grief. Um, yeah.. I knew that.

Knew it all along. Um, just checking to make sure you guys knew that.

mills · #12 (**permalink**) Jun 13th, 2005, 11:36

i found away to make the background adjust and stretch, u will need to have an image that is suitable thou and of course get it at a decent file size....

Code: Select all

<body style="margin: 0px; padding: 0px;" bgcolor="#968E69"> 
<div style="width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 0;"> 
[img]imgs/gen/mainbg.jpg[/img] 
</div> 
<div style="z-index: 1; position: absolute;">

i did it on a site im making at the moment. you do need a big image to start with thou. hope it helps!

autumn_whispers2me · #13 (**permalink**) Jun 13th, 2005, 13:57

Thanks mills!! 8)

bruno89 · #14 (**permalink**) Jul 20th, 2005, 10:21

<body background="image url" valign="top" bgcolor="#000000" text="#ffffff" link="#ffffff" vlink="#ffffff">

this is what i used 4 my website an it worked 4 me

autumn_whispers2me · #15 (**permalink**) Jul 20th, 2005, 13:48

Thanks! You guys are awesome. 8)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Creating a "tag" system to find relevant "related" pages	MrQuestions	PHP Forum	3	Mar 20th, 2008 23:06
[SOLVED] Show "Image" Depends On User "Status"?	Monie	Classic ASP	6	Oct 16th, 2007 01:22
? IS "meta name="robots" content="?" necessary in pages ?	Love2Java	Starting Out	6	Aug 8th, 2007 13:48
window.opener.document["nameForm"].getElementById("someid").value; doesnt work	drpompeii	JavaScript Forum	0	Feb 17th, 2007 23:09
Newbie Question- Basic HTML email method="post"	Bagel	Web Page Design	4	Aug 18th, 2006 12:03

		Webforumz.com > Main Forums > Design Your Website > Graphics and 3D
Another "How'd They Do That?" question