Sizing background images

Discussion in 'HTML' started by James O'Riley, May 2, 2006.

  1. 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
    James O'Riley, May 2, 2006
    #1
    1. Advertising

  2. 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 |
    Barbara de Zoete, May 2, 2006
    #2
    1. Advertising

  3. James O'Riley

    Andy Dingley Guest

    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.
    Andy Dingley, May 2, 2006
    #3
  4. James O'Riley

    Neredbojias Guest

    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.
    Neredbojias, May 2, 2006
    #4
  5. James O'Riley

    Sid Ismail Guest

    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
    Sid Ismail, May 2, 2006
    #5
  6. James O'Riley

    Nik Coughlin Guest

    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
    Nik Coughlin, May 2, 2006
    #6
  7. James O'Riley

    Toby Inkster Guest

    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
    Toby Inkster, May 3, 2006
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Allen Flick

    Sizing Images

    Allen Flick, Jan 7, 2004, in forum: HTML
    Replies:
    14
    Views:
    736
    Toby A Inkster
    Jan 15, 2004
  2. dorayme
    Replies:
    0
    Views:
    372
    dorayme
    Feb 20, 2009
  3. MISS CHIEVOUS
    Replies:
    51
    Views:
    2,053
    MISS CHIEVOUS
    Apr 19, 2009
  4. Jeff

    problem sizing images

    Jeff, Apr 3, 2009, in forum: ASP .Net
    Replies:
    3
    Views:
    315
    Alexey Smirnov
    Apr 13, 2009
  5. Jimbo
    Replies:
    0
    Views:
    136
    Jimbo
    Jan 12, 2004
Loading...

Share This Page