Sizing background images

05-02-2006

How does one properly size a background image? The problem is that
this particular background image is one of the world that would go
nicely with my Web Page *index.htm*. It appears 4 times as you scroll
down the page. I've tried 4 different sizes and it doesn't change a bit.

Possibly I've coded it wrong. The line of code is:

<BODY BACKGROUND="aworld.gif" TEXT="#000000" LINK= "#0000FF"
ALINK="#ff0000" VLINK= "0000A0">

I've not put it on the Web yet because if I can't get this to work
there's no sense to put it up.

Thanks for help,
James

05-02-2006

On Tue, 02 May 2006 17:39:28 +0200, James O'Riley <James@O'Riley.com>
wrote:

> How does one properly size a background image? The problem is that
> this particular background image is one of the world that would go
> nicely with my Web Page *index.htm*. It appears 4 times as you scroll
> down the page. I've tried 4 different sizes and it doesn't change a bit.
>
> Possibly I've coded it wrong. The line of code is:
>
> <BODY BACKGROUND="aworld.gif" TEXT="#000000" LINK= "#0000FF"
> ALINK="#ff0000" VLINK= "0000A0">

You're looking in the wrong direction. First size the image to be the
dimensions you want it to be. Then look at CSS to style the body
background with an image and position it with:
<URL:http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background>

Maybe this is how you would like the image to behave:

body {
background:#FFF url(aworld.gif) center center no-repeat;
}

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

05-02-2006

James O'Riley wrote:
> How does one properly size a background image?

Assuming you're going to tile it (repeat it for any page size) then you
hardly need to "size" it. Just make it big enough to look OK, small
enough to download quickly.

Then use CSS to attach the background image to the page, because this
works in all important browsers and gives you more control over the
positioning and tiling behaviour. Also set the background color to
something that "works" with the image, as an alternative or as a filler
while it's downloading.

> The problem is that
> this particular background image is one of the world that would go
> nicely with my Web Page

Watch out for big images in backgrounds. Big files take time to
download and that's not a good thing.

> I've tried 4 different sizes and it doesn't change a bit.

Probably a caching issue. Try hitting <Control-Refresh>, not just
Refresh.

> <BODY BACKGROUND="aworld.gif" TEXT="#000000" LINK= "#0000FF"
> ALINK="#ff0000" VLINK= "0000A0">

Dump all these old HTML 3.2 attributes on <body> CSS is much easier,
especially for replacing these.

> I've not put it on the Web yet because if I can't get this to work
> there's no sense to put it up.

Yes there is - we can't help you if we can't see it.

05-02-2006

To further the education of mankind, James O'Riley <James@O'Riley.com>
vouchsafed:

> How does one properly size a background image? The problem is that
> this particular background image is one of the world that would go
> nicely with my Web Page *index.htm*. It appears 4 times as you scroll
> down the page. I've tried 4 different sizes and it doesn't change a bit.
>
> Possibly I've coded it wrong. The line of code is:
>
> <BODY BACKGROUND="aworld.gif" TEXT="#000000" LINK= "#0000FF"
> ALINK="#ff0000" VLINK= "0000A0">

Unquestionably, but look on the bright side. That might have been right 10
years ago.

> I've not put it on the Web yet because if I can't get this to work
> there's no sense to put it up.

Absolutely true. And in a 10-year scope, there's no rush, anyway.

> Thanks for help,

Andy probably identified your size problem (regarding the bg image), but
the best advice from both previous responders was to acquaint yourself with
css (-and, implied, current html standards).

--
Neredbojias
Infinity has its limits.

05-02-2006

On 2 May 2006 09:25:09 -0700, "Andy Dingley <>"
<> wrote:

: Assuming you're going to tile it (repeat it for any page size) then you
: hardly need to "size" it. Just make it big enough to look OK, small
: enough to download quickly.

I don't think he wants it seamlessly tiled. He already complained
that it repeated 4 times. Seems he has a pic roughly width 300.

Sid

05-02-2006

James O'Riley wrote:
> How does one properly size a background image? The problem is that
> this particular background image is one of the world that would go
> nicely with my Web Page *index.htm*. It appears 4 times as you scroll
> down the page. I've tried 4 different sizes and it doesn't change a
> bit.
> Possibly I've coded it wrong. The line of code is:
>
> <BODY BACKGROUND="aworld.gif" TEXT="#000000" LINK= "#0000FF"
> ALINK="#ff0000" VLINK= "0000A0">

Hi James,

Do some research on CSS, it can't help you to size the background image, but
it can help you to control it in such a way that it doesn't repeat itself.

This is the quick and dirty way to do it using what is known as "inline
CSS", which is the closest to the way that you are used to doing it with
attributes:

<body style="background: url( 'aworld.gif' ) center center no-repeat;">

Once you know more about CSS you will know to put that in an external
stylesheet, but for now that should at least get you started.

Cheers

05-03-2006

James O'Riley wrote:

> How does one properly size a background image?

The GIMP <http://www.gimp.org/> is good.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Re: background images and span element when images are turned off	Adrienne Boswell	HTML	1	08-04-2009 10:51 AM
Re: background images and span element when images are turned off	Travis Newbury	HTML	0	08-04-2009 10:27 AM
IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags &CSS	MISS CHIEVOUS	HTML	51	04-19-2009 04:25 PM
Re: AUTO-SIZING YOUR <---W-I-D-E---> IMAGES in Older Versions of IEX(NÃ”Ã”B Friendly & Widescreen Ready!)	dorayme	HTML	0	02-20-2009 11:22 PM
Sizing Images	Allen Flick	HTML	14	01-15-2004 05:49 PM