Results 1 to 9 of 9
  1. #1
    Join Date
    Jan 2003
    Location
    Rancho Cucamonga, CA
    Posts
    246

    Question Simple HTML Question - Help Needed

    Good Morning Everyone!

    I have a simple HTML question and I was hoping someone could answer it for me.

    Here is the HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DataDork</title>
    <style type="text/css">
    body, html { height: 98%; }
    #center { vertical-align: center; }
    #container { width: 700px; margin: auto; height: 100%; }
    </style>
    <meta http-equiv="keywords" content="" />
    <meta http-equiv="description" content="" />
    <meta http-equiv="author" content="James Edmonds" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="shortcut icon" href="/favicon.ico" />
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0" id="container">
    <tr>
    <td id="center"><img src="/images/datadork.gif" alt="DataDork" width="700" height="228" /></td>
    </tr>
    </table>
    </body>
    </html>

    I need to insert a background image, called /images/background.gif and I am confused how to add it to the above code.

    Simple?
    James Edmonds
    DataDork Consulting
    http://www.datadork.com

  2. #2
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,231
    Very simple. Where exactly do you need to insert it? Into the table? Into the entire page?

    For the table, make the following addition to your #container rule:
    #container { background: url(path/file.ext); width: 700px; margin: auto; height: 100%; }

    For the entire page:
    body { background: url(path/file.ext); }

    You can do other things with the background, like tile it along an axis, shift its position so that it starts tiling from one of the nine points of the container (top left, top middle, top right, center left, center center, center right, bottom left, bottom middle, bottom right). You can also set the background to not repeat at all. If any of these items are of interest, give some more detail, and I'll give you the mark-up

    How're things with the new sweetie?
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  3. #3
    Join Date
    Jan 2003
    Location
    Rancho Cucamonga, CA
    Posts
    246
    lol, she is still in the training period but I am hopeful she will graduate with honors soon. lol

    I need it for the entire page and, I am sorry to admit, I am confused were to insert "body { background: url(/images/background.gif); } correctly. Can you provide an example.

    I really appreciate you taking a minute to help me out.
    James Edmonds
    DataDork Consulting
    http://www.datadork.com

  4. #4
    Join Date
    Jan 2003
    Location
    Rancho Cucamonga, CA
    Posts
    246
    Figured it out. Thanks for your help....
    James Edmonds
    DataDork Consulting
    http://www.datadork.com

  5. #5
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,231
    Sure thing. That's a rule that would go into your stylesheet in the <head> section of your page.

    The placement should look something like this:

    body, html { height: 98%; }
    body { background: url(/images/background.gif); }

    By the way, if you ever end up with more content on a page than can fit on a screen, you're going to find that setting the body and html to 98% height will leave an odd gap at the bottom of the page. In the future, if you find yourself puzzled over this, there's your answer.

    Also, you might find yourself wanting to remove the padding around the contents of your pages. The best way to do this is to expand upon the piece of CSS code I gave you so it looks like this:

    body { background: url(/images/background.gif); margin: 0; padding: 0; }

    HTH

    Edit: Ah, just noticed you got it. Well good!
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  6. #6
    Join Date
    Jan 2003
    Location
    Rancho Cucamonga, CA
    Posts
    246
    Here is the final result. After getting your reply, I added your suggestions. Does it look correct?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DataDork</title>
    <style type="text/css">
    body, html { height: 100%; }
    body { background: url(/images/background.gif); margin: 0; padding: 0; }
    #center { vertical-align: center; }
    #container { width: 700px; margin: auto; height: 100%; }
    </style>
    <meta http-equiv="keywords" content="" />
    <meta http-equiv="description" content="" />
    <meta http-equiv="author" content="James Edmonds" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="shortcut icon" href="/favicon.ico" />
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0" id="container">
    <tr>
    <td id="center"><img src="/images/datadork.gif" alt="DataDork" width="700" height="228" /></td>
    </tr>
    </table>
    </body>
    </html>

    Thanks again for your time. I owe you one..
    James Edmonds
    DataDork Consulting
    http://www.datadork.com

  7. #7
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,231
    Looks correct to me, my friend. Does it work properly when you display it?
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  8. #8
    Join Date
    Jan 2003
    Location
    Rancho Cucamonga, CA
    Posts
    246
    Originally posted by the_pm
    Looks correct to me, my friend. Does it work properly when you display it?
    Looks good on my end, when displayed.

    DataDork

    Thanks again...
    James Edmonds
    DataDork Consulting
    http://www.datadork.com

  9. #9
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,231
    Yep, looks good

    You're welcome.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •