Results 1 to 9 of 9
-
05-09-2005, 01:30 PM #1Junior Guru
- Join Date
- Jan 2003
- Location
- Rancho Cucamonga, CA
- Posts
- 246
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?
-
05-09-2005, 01:43 PM #2Retired Moderator
- 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
-
05-09-2005, 01:57 PM #3Junior Guru
- 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.
-
05-09-2005, 02:01 PM #4Junior Guru
- Join Date
- Jan 2003
- Location
- Rancho Cucamonga, CA
- Posts
- 246
Figured it out. Thanks for your help....
-
05-09-2005, 02:04 PM #5Retired Moderator
- 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
-
05-09-2005, 02:13 PM #6Junior Guru
- 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..
-
05-09-2005, 02:21 PM #7Retired Moderator
- 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
-
05-09-2005, 02:51 PM #8Junior Guru
- 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?
DataDork
Thanks again...
-
05-09-2005, 02:55 PM #9Retired Moderator
- Join Date
- May 2004
- Location
- Pflugerville, TX
- Posts
- 11,231
Yep, looks good
You're welcome.Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design