can't get background image to show. 3

jlockley · Aug 23, 2009

I cannot get this background to show, no matter what. Can someone tell me what I am missing.
(the path/url functions if the image is inserted as an image).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
<title>Green Restaurant Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Green Restaurant Strategies assists restaurant owners and management in making economically sound decisions and satisfy customer demand by adhering to strategically developed and employed green strategies. Working for the environment and you profit margin. "/>
<meta name="keywords" content="Green Restaurant, hospitality consulting, sustainable restaurant consulting, green economics, Howard Cummins"/>
<meta name="robot" content="index,follow"/>
<meta name="author" content="Schweig Berlin"/>
<meta name="googlebot" content="index, follow"/>
<meta name="robots" content="all"/>
<meta name="revisit-after" content="15"/>
<style type="text/css"/>

<style>
BODY {
background-color : #FFFFFF;
background-image: url('../../../../grs/bkgd.jpg');
background-repeat: no-repeat;
font-family:"Geometr706 Md BT";
color: #ccff00;
font-size:18pt;
a:link {color:#00330 text-decoration: underline};
a:visited {text-decoration: underline;

}

</style>
</head>

<body>

</body>
</html>

feherke · Aug 27, 2009

Hi

jlockley said:
Note: for the original just go to www.greenrestaurantstrategies.com

You know you have no opening [tt]body[/tt] tag there, right ?

Regarding your posted code, you forgot to close the quotes around the [tt]alt[/tt] attribute's value :

Code:

[b]<img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"images/header.png"[/i][/green] [maroon]width[/maroon][teal]=[/teal][green][i]"900"[/i][/green] [maroon]height[/maroon][teal]=[/teal][green][i]"92"[/i][/green] [maroon]alt[/maroon][teal]=[/teal][green][i]"Green Restaurant Strategies. A hospitality sustainability consultancy[highlight]"[/highlight][/i][/green] [b]/>[/b]

Feherke.

http://rootshell.be/~feherke/

ChrisHunt · Aug 27, 2009

Here's a way of doing what I think you're trying to do with the earth and that blue-grey box, without all those &nbsps and other rubbish.

You need 4 images:
[ul]
[li]earth.jpg - your existing globe image[/li]
[li]boxtop.gif - the top edge and corners of the box. Needs to be tall enough to include the bevelled edge, say 20px. Its width will be the width of the box, say 500px.[/li]
[li]boxbot.gif - the bottom edge and corners, also 20px high.[/li]
[li]box.gif - a slice across the middle of the box, including left and right edges. This image only needs to be a few pixels high[/li]
[/ul]
You then mark up your code like this:

Code:

<div class="globe">
  <div class="box"><div><div>
    <p>
      Your text goes in here. There's no need to have any
      &amp;nbsps or other nonsense - the CSS takes care
      of all that!
    </p>
    <p>
      It can also keep your paragraphs nice and cosy!
    </p>
  </div></div></div>
</div>

It's a pity to have to use four divs instead of one or two - one day CSS will allow multiple backgrounds on one element. Until then we have to endure a little clutter (but less than a table!).

Now the CSS:

Code:

div.globe {
  background: url(/images/earth.jpg) top left no-repeat;
  padding-left: 250px; /* a bit wider than the earth image */
}

div.box {
  background: #ccc url(/images/box.gif) top left repeat-y;
  width: 500px; /* width of box images */
}

div.box div {
  background: url (/images/boxtop.gif) top left no-repeat;
}

div.box div div {
  background: url (/images/boxbot.gif) bottom left no-repeat;
  padding: 25px; /* width of bevel plus a bit */
  min-height: 180px; /* height of globe, minus padding */
}

div.box p {
  margin: 0;
  padding: 0; /* cosy enough for ya? */
}

I haven't tested the above, so you'll probably need to fine-tune it a bit, but it should get you thinking along the right lines.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

jlockley · Aug 27, 2009

You know you have no opening body tag there, right ?

..well, no. I am sure I had one. As a matter of fact, I am sure I had one a couple of times. Thanks. Also for the quotes. That might explain a fair amount.

Chris: I will try that. Unfortunately I haven't been able to export the globe with a transparent background (png, gif) and satisfactory color. I don't know if that would work, anyway. If I do it like this, I get the white box, which I guess I could work with somehow in the stripes.

I've been boning up with O'Reilly and have a couple of ideas. multiple <div>s or inline styles may help. Again my concern is that different resolutions will skew it out of proportion.

What I intend to try to do is go from px to % in all things except the fixed images (which need manipulation) on the right. Will know what is happening by tomorrow. Thanks loads.

btw, I had the #centerbox listed as <div class... fixed with no results, but fixed none the less..

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

can't get background image to show. 3

jlockley

Technical User

feherke

Programmer

ChrisHunt

Programmer

jlockley

Technical User

Similar threads

Part and Inventory Search

Sponsor