shelvy19 Posted February 24, 2008 Posted February 24, 2008 (edited) I have Windows Professional XP, 160G hardrive, over one gig of RAM, use Adobe Photoshop Elements for creating images. I am editing an onlinemagazine and want to use a created image for the entire page of Table of Contents, but then want to overlay that with clickable text for each contents listing. HAD been using <body background... for previous contents page, but then I just had repeating images for the background. Now I'm wanting to use a single image for the background, but it keeps repeating. Any ideas how I can do this??? Thomas Shelby Vick, editor, Planetary Stories shelvy20012000@yahoo.com Edited February 24, 2008 by shelvy19 Quote
Bob Crabb Posted February 24, 2008 Posted February 24, 2008 You could use CSS to define where in the body your background image will be placed, whether or not it will repeat, and if it repeats whether it repeats vertically or horizontally. If you do not use an external CSS file, you could put style declarations in the page head, or you could use inline style. Here is an example: ><body style="background-image: url(/your_image_folder/your_image.png); background-position: top center; background-repeat: no-repeat;"> For more information, here is a link to the W3C page on background in CSS: http://www.w3schools.com/css/css_background.asp Quote
shelvy19 Posted February 25, 2008 Author Posted February 25, 2008 You could use CSS to define where in the body your background image will be placed, whether or not it will repeat, and if it repeats whether it repeats vertically or horizontally. If you do not use an external CSS file, you could put style declarations in the page head, or you could use inline style. Here is an example: ><body style="background-image: url(/your_image_folder/your_image.png); background-position: top center; background-repeat: no-repeat;"> For more information, here is a link to the W3C page on background in CSS: http://www.w3schools.com/css/css_background.asp Did a cut-n-paste on your example. Here is what I used: <body style="background-image: /home/xxxxx/public_html/images/ 'PS_TOC.jpg'); background-position: top center; background-repeat: no-repeat;"> </style> substituting my page ID for url. Nothing showed up. I've read a lot of the CSS tutorials and am, in fact, going back to them now. But there's SOMEthing I'm just not getting. Shelby Quote
TCH-Bruce Posted February 25, 2008 Posted February 25, 2008 You do not use the /home/xxx/public_html/images as the path in the background-image url. It needs to be a url. http://your-domain/images/image name or just /images/imagename Quote
Bob Crabb Posted February 25, 2008 Posted February 25, 2008 (edited) Shelby, the syntax for the background-image url is wrong. Follow Bruce's recommendation for forming the actual url. Also, the declaration requires the word url, followed by () containing the actual image url. In this case, you are using an inline style parameter. Style is a parameter of the body tag, therefore you should not use a /style end tag. Try this code for your body tag: ><body style="background-image: url(/images/PS_TOC.jpg); background-position: top center; background-repeat: no-repeat;"> That should work, assuming that you want the image postitioned at the top center of the body. --Bob Edited February 25, 2008 by Bob Crabb Quote
shelvy19 Posted February 25, 2008 Author Posted February 25, 2008 You do not use the /home/xxx/public_html/images as the path in the background-image url. It needs to be a url. http://your-domain/images/image name or just /images/imagename Tried that. Tried: <body style="background-image: http://www.planetarystories.com/images/ PS_TOC.jpg"); background-position: top center; background-repeat: no-repeat;"> </style> because I want the image NOT to repeat. It not only didn't repeat -- it didn't come up at all! Shelby Quote
TCH-Bruce Posted February 25, 2008 Posted February 25, 2008 Try what Bob said. ><body style="background-image: url(/images/PS_TOC.jpg); background-position: top center; background-repeat: no-repeat;"> Quote
Bob Crabb Posted February 25, 2008 Posted February 25, 2008 (edited) Try what Bob said. ><body style="background-image: url(/images/PS_TOC.jpg); background-position: top center; background-repeat: no-repeat;"> Shelby, if you copy that code exactly, and the page and image are in the same domain, it will work. Alternatively, if you wish to use the entire url for your background image, you could use the following code: ><body style="background-image: url(http://www.planetarystories.com/images/PS_TOC.jpg); background-position: top center; background-repeat: no-repeat;"> Here is a page that I made, using the above code: (this page is temporary, and the link will not work after today) So, you can see that this will work if properly implemented. Also, please remember that in this case style is an attribute of the body tag, therefore it would be inappropriate to add a /style end tag. Good luck, --Bob Edited February 25, 2008 by TCH-Bruce link removed per request Quote
shelvy19 Posted February 25, 2008 Author Posted February 25, 2008 Shelby, if you copy that code exactly, and the page and image are in the same domain, it will work. Alternatively, if you wish to use the entire url for your background image, you could use the following code: ><body style="background-image: url(http://www.planetarystories.com/images/PS_TOC.jpg); background-position: top center; background-repeat: no-repeat;"> Also, please remember that in this case style is an attribute of the body tag, therefore it would be inappropriate to add a /style end tag. Good luck, --Bob I'm doing SOMEthing wrong, Bob. Copied what you had, got nothing. Mebbe my mistake was early-on. Below is the entire page, sans text -- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>cont10</title> <head> <body style="background-image: http://www.planetarystories.com(/images/PS_TOC.jpg); background-position: top center; background-repeat: no-repeat;"> Should I not have repeated <head>? Shelby Quote
TCH-Bruce Posted February 25, 2008 Posted February 25, 2008 You have a typo: http://www.planetarystories.com(/images/PS_TOC.jpg); The piece in red should not be there Should be http://www.planetarystories.com/images/PS_TOC.jpg); The part in bold is missing. Quote
TCH-Bruce Posted February 25, 2008 Posted February 25, 2008 You close the container with , not another . From w3schools The head element can contain information about the document. The browser does not display the "head information" to the user. The following tags can be in the head section: , , , <script>, And this would be how you use it in it's simplest form. ><html> <head> <title>Title of the document</title> </head> <body> ... ... ... </body> </html> Quote
Bob Crabb Posted February 25, 2008 Posted February 25, 2008 As you can see from Bruce's highlighting, the body tag was not properly copied. Below, I have edited your code. Please copy and paste into your file, overlaying everything from the html tag through the body tag. ><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>cont10</title> </head> <body style="background-image: url(http://www.planetarystories.com/images/PS_TOC.jpg); background-position: top center; background-repeat: no-repeat;"> Quote
shelvy19 Posted February 25, 2008 Author Posted February 25, 2008 As you can see from Bruce's highlighting, the body tag was not properly copied. Below, I have edited your code. Please copy and paste into your file, overlaying everything from the html tag through the body tag. ><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>cont10</title> </head> <body style="background-image: url(http://www.planetarystories.com/images/PS_TOC.jpg); background-position: top center; background-repeat: no-repeat;"> YAY!!! That did it! Sure helps to know what you're doing. Thanxalot, Shelby Quote
Bob Crabb Posted February 26, 2008 Posted February 26, 2008 That's great, Shelby. I'm glad that you got it to work. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.