Sizing background images

James O'Riley · May 2, 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

Barbara de Zoete · May 2, 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">

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;
}

Andy Dingley · May 2, 2006

James said:
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.

not just said:
<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.

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

Neredbojias · May 2, 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">

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).

Sid Ismail · May 2, 2006

On 2 May 2006 09:25:09 -0700, "Andy Dingley <[email protected]>"

: 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

Nik Coughlin · May 2, 2006

James said:
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

Toby Inkster · May 3, 2006

James said:
How does one properly size a background image?

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

Flip-Cards with Local Images	1	Mar 27, 2023
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
<Button ...> display is fine, except for two things	1	Oct 23, 2023
Slideshow not working properly	2	Jan 7, 2023
Fixed background image	7	Apr 15, 2005
Help with my responsive home page	2	Dec 14, 2022
IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags &CSS	51	Apr 2, 2009

Sizing background images

James O'Riley

Barbara de Zoete

Andy Dingley

Neredbojias

Sid Ismail

Nik Coughlin

Toby Inkster

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads