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!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

can't get background image to show. 3

Status
Not open for further replies.

jlockley

Technical User
Nov 28, 2001
1,522
US
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" "<html xmlns="
<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>
 
Hi

Should not make too much difference, but I would start by correcting the CSS - move the rules of [tt]a[/tt] out from the rules of [tt]body[/tt] ( also corrected minor bugs ) :
CSS:
body [teal]{[/teal]
  [blue]background-color:[/blue] [green][i]#FFFFFF[/i][/green];
  [blue]background-image:[/blue] [green]url[/green]('[green]..[/green]/[green]..[/green]/[green]..[/green]/[green]..[/green]/[green]grs[/green]/[green]bkgd.jpg[/green]');
  [blue]background-repeat:[/blue] [green]no-repeat[/green];
  [blue]font-family:[/blue] "[green]Geometr706[/green] [green]Md[/green] [green]BT[/green]";
  [blue]color:[/blue] [green][i]#ccff00[/i][/green];
  [blue]font-size:[/blue] [green]18pt[/green];
[teal]}[/teal]

a[teal]:[/teal]link [teal]{[/teal]
  [blue]color:[/blue] [green][i]#003300[/i][/green];
  [blue]text-decoration:[/blue] [green]underline[/green];
[teal]}[/teal][teal];[/teal]

a[teal]:[/teal]visited [teal]{[/teal]
  [blue]text-decoration:[/blue] [green]underline[/green];
[teal]}[/teal]
( You may also correct the [tt]style[/tt] tag too, by adding the required [tt]type[/tt] attribute. )

If that not helps, try to add some dummy content into the [tt]body[/tt], something like [tt]<p/>[/tt] or [tt]<p>&nbsp;</p>[/tt].

If neither that works, show us a live example of that page.


Feherke.
 
Also, if you really want self-closing tags, this:
Code:
<style type="text/css"/>
is not valid.
Self-closing tags need a space between the " and the /> like this:
Code:
<style type="text/css" />
You have only one valid self closing tag which is your first meta tag.
One last thing i'd mention is that if you want styles in your html, dont self-close the <style> tag.
Personally, I would use external styles. :)
 
Hi feherke.
Because he has two <style> tags:
Code:
<style type="text/css"/>


<style>
I tried taking away the bottom style tag and it worked in firefox 3.0.13
 
Hi

cygmorg said:
Because he has two <style> tags
There is no problem with that. There are two [tt]style[/tt] sections, an empty and a non-empty. Note that the first [tt]style[/tt] tag is ended with a slash ( / ), so it also ends there.

Also note that you not have to believe me. Ask the W3C Markup Validation Service.

Feherke.
 
I don't know why, but in firefox, Opera, Safari, Avant Browser, Sleipnir, K-Meleon, Google Chrome, IE 8, Flock and FlashPeak SlimBrowser, regardless that the first <style> tag is self-closing, it doesnt work with two <style> tags in the same html document :)
 
Although the "/>" end to the "<style>" tag suggests it is self-closing, the reality is probably very different.

In my simple tests, it seems that my browser (firefox) considers a self-closing "style" tag to still be open until it meets the next closing tag.

In the above example, the empty self-closing tag therefore effectively consumes the subseqent style block without processing it as styles.

The W3 validator is testing for "valid" (i.e. conforming to the standard) xhtml. Although the page might be syntactically valid, that doesn't mean any browsers will necessarily know what to do with it.

I think this is an excellent example of valid syntax not being the whole story and a good reason to not blindly trust the W3 validator as proving your site/page to be perfect.

I am, however, not criticising the W3 validator page at all. I just think that it's a little like blindly trusting the results of a calculator.

Just my 2 penneth



Trojan.
 
Thank you all. Interesting. It's an inappropriately large background, since I can only make the image transparent by incorporating it, but I did get it working on the web. current code below. Thanks for the tip on self closing. trying to work with PHP right now, I suffer from white space confusion.

Some of this is certainly Windows related. Fewer issues when working on the server, but without good editing tools on the server at the moment, I prefer to write (by hand, not WYSIWYG) using Expression Web or the like (pretty colors, warnings) which, frankly, stinks.

Padding out the two div's were part of the issue. Not sure any more. The background worked at times, then disappeared. Not a clue why. Right now it's there waiting to be tweaked.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="
<head>
<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"/>

<?
#body {
width: 900px;
margin-right: auto;
margin-left: auto;
width:100%;
height:auto;
background-color : #FFFFFF;
background-image: url(' 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;

}
.style1 {font-size: 16px}
a:visited {
color: #C7B779;
text-decoration: underline};

}
a:link {
color: #333333;
text-decoration: underline};

a:hover {
color: #009900;
}
--->
</head>

<body>

</body>

</html>
 
I see many things wrong with that code, half of which look like they've been introduced as part of wild guesswork to get things working... but they're wild guesswork that is completely wrong.

1. You are referencing an HTML document for your background image - which, unless you've saved your image with a .HTML extension, would not work.

2. You have some odd characters before your DOCTYPE. This might cause some browsers to display in quirks mode, and / or display them on the page, so you should remove them.

3. Your CSS now has a hash symbol in front of 'body', which denotes an ID. Given you have no element with an ID of 'body', you should remove the hash leaving only 'body' if you want the background image on the body.

4. You no longer have ANY style tags around your CSS. Use this, and this alone:

Code:
<style type="text/css">
/* Insert your CSS here */
</style>

5. You have an erroneous end HTML comment with no corresponding starting comment. You should remove this. Also, NEVER use HTML-style comments inside CSS blocks, whether included in the page or externally. The only comments allowed in CSS are multi-line style C comments as shown in point 4 above.

6. You still haven't remove the erroneous a:visited and a:link rules from inside the body definition. The ones outside of it are fine, so remove the ones inside it (as feherke has already shown you).

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Oh yes...

7: You have an erroneous opening PHP tag ("<?") with no corresponding end tag. I'm surprised this page even loads!

Fix those 7 issues, and you should be home and dry. If you're not, post updated code or a URL to a page with updated code.

Before doing that, however, validate your CSS and HTML:

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Hi

cygmorg, you are right. I should not suppose that standard-aware browsers are rendering standard-compliant documents according to the standards.
Trojan said:
I just think that it's a little like blindly trusting the results of a calculator.
Neither I. First I read the specification then I use the validator to test what I understood.


Feherke.
 
I think the problem is that whilst this is perfectly valid XHTML...
Code:
<style type="text/css"/>

<style>
BODY {
          background-color : #FFFFFF;
        /* ... other rules here ... */
     }

</style>
...many modern browsers don't really work with XHTML, especially when served with an HTML mime type. What they do is render it as HTML, which is normally OK, but occasionally isn't.

Self-closing tags are particularly problematic - HTML doesn't have them and doesn't understand them. They work in <img> tags, because HTML doesn't expect a closing tag anyway, but anything where a closing tag is required had better have one if your code is going to work.

So with the code above, HTML renderers see the first <script> tag, don't know what to do with the / at the end so do nothing with it, and then apply the first CSS rules to [tt]<style> BODY[/tt] - which matches nothing.

cygmorg is right - take away one of the opening style tags and it should work fine.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Thanks. Will look at it. This second code is actually taken over from the original page, which worked better than mine. I believe I've got the tags right now, but I will look in the morning.

As for wild guessing, well maybe. This is my associtate's page for a start up, which his brother did for him with Dreamweaver. That may explain a heap of what appears to me to be unnecessary. The pages were just plain ugly, and I thought I could just switch out backgrounds, but things have become complex. I haven't done this for a bit, and am rusty. As I am working myself back in, I'm cleaning up a lot of stuff and adding more sensible classes, I think. Thank you for the help.
As I said, I initially used Explorer Web to open the new page type it up, but that caused more problems than it solved, as well.

 
To add to the list...

8. font-family:"Geometr706 Md BT"; seems a bit too specific for a font that is not likely installed on most computers.

font-family: Verdana, Arial, Helvetica, sans-serif; seems more ideal and matches the style of the rest of the site.
 
that's already been changed. Thanks. Working on it now.
 
Thank you all again for your assistance. I am sort of where I want to be in firefox, will all respect to the background issue (you can see what I am trying to do with the earth) but wouldn't mind feedback on a few issues:

1) Explorer weirdness. More than the usual. Pow.
2) Is there a way to get <p>'s to cozy up to each other vertically? I inherited the &nbsp garbage from the originator of the site and would like to be able to work the indents without it. (If I could get the earth gif transparent it would solve this. Png and Gif formates aren't doing it for the color)
2) Validation is taking some of the '<' brackets for data rather than code. (???) and the phantom "t" further down has me stymied. I'm still playing Where's Waldo with the extra </p>, too.

Thanks.
Note: for the original just go to
I haven't played with the header yet..that's tomorrow. Despite the general feeling towards them, I think a table may be the way to go.

# Line 19, Column 1: character "<" is the first character of a delimiter but occurred as data

<p class="toplinks">

?

This message may appear in several cases:

* You tried to include the "<" character in your page: you should escape it as "&lt;"
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
* Another possibility is that you forgot to close quotes in a previous tag.

# Error Line 19, Column 19: an attribute value literal can occur in an attribute specification list only after a VI delimiter

<p class="toplinks">

?

Have you forgotten the "equal" sign marking the separation between the attribute and its declared value? Typical syntax is attribute="value".
# Error Line 19, Column 20: end tag for "img" omitted, but OMITTAG NO was specified

<p class="toplinks">

?

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
# Info Line 15: start tag was here

t<img src="images/header.png" width="900" height="92" alt="Green Restaurant Strat

# Error Line 24, Column 4: end tag for element "p" which is not open

</p>

?

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.
# Warning Line 44, Column 245: reference not terminated by REFC delimiter

…gh energy savings <br/> &nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

?

If you meant to include an entity that starts with "&", then you should terminate it with ";". Another reason for this error message is that you inadvertently created an entity by failing to escape an "&" character just before this text.
# Error Line 19, Column 20: XML Parsing Error: Unescaped '<' not allowed in attributes values

<p class="toplinks">

?
# Error Line 44, Column > 80: XML Parsing Error: EntityRef: expecting ';'

…t and your business by attracting customers in the short term and <br/>&nbsp;…
 
sure. Still working on it. Had some issues with borders and the two right hand images, so overused clear. You'll see that.
The top image, links and filter are still pretty much as I got them. Trying to figure out a way to make the text wrap around earth on background, but I think that's probably not going to happen. Plan B would use a list.

CSS
BODY {
background-color : #FFFFFF;
background-image: url(images/bkgd.jpg);
background-repeat: no-repeat;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #669966;
margin: 0;
padding:0;
}


#header {

/*top:auto;*/
width:1020px;
height:100px;
z-index:1;
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000000;
border-bottom-style: none;
margin-top: auto;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0px;
clear:both;
}


#footer {
margin-left:140px;
margin-top:502px;
width:1020px;
height:auto;
z-index:6;
clear: both;
border-top-width: medium;
border-top-style: none;
border-top-color: #024A1A;
}
#sidebar
{
float:right;
margin-left:auto;
margin-right:auto;
height: 501px;/*500px*/
padding-top:40px;
clear:both;
width:20%;
}
#centerbox
{
font-size:14pt;
float: left;
margin-top: 1px;
padding-top: 45px;
height: 401px;/*400px*/
color:#666666;
font-family: corbel, tahoma, ariel, sans-serif;
width: 80%;
}
#wrapper {
height: 630px;
width: auto;
padding-top: 0;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-image: url(' /bkgd.jpg');
clear:both;
}

#toplinks
{
font-size: 16px

}
a:visited {
color: #C7B779;
}
a:link {
color: #333333;
}
a:hover {
color: #009900;
}
img.upper
{
position:absolute;
float: left;
margin-top: 1px;
margin-left: 2px ;
clear:right;
}
img.lower
{
float:left;
position: absolute;
margin-left: 2px;
margin-top: 345px;
clear:left;
}

div.image-envelope
{float:left;
width: 160px;
height:100%;
margin-top:1px;
margin-left:1px;
clear:both;
}
img.upper
{
float: left;
margin-top: 1px;
margin-left: 2px ;
clear:both;
}
img.lower
{
float:left;
position: absolute;
margin-left: 2px;
margin-top:auto;
clear:both;
}

p.one {
margin-left: 200px;
font-weight:700;
font-size: 16pt;
}
p.two
{margin-left: 200px;
font-size: 16pt;
font-weight: 700;
}
p.three
{padding-top: 0px;
padding-bottom: 0px;
padding-left: 110px;
font-size:14pt;
color:#006633;
margin-top: 0.1em;
margin-bottom: 0.5em;
margin-left: auto;
font-weight: 500;
}
p.four
{
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left:170px;
font-size:14pt;
color: #006633;
margin-top: 0.2em;
margin-bottom: 0.2em;
font-weight: 500;
}

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Green Restaurant Strategies </title>
<link rel="stylesheet" type="text/css" href="grs.css" />

</head>

<body>

<div id="wrapper">
<div id="header">
<img src="images/header.png" width="900" height="92" alt="Green Restaurant Strategies. A hospitality sustainability consultancy />



<p class="toplinks">
<h4>
/* unless something better comes up to space these, the best way is probably a table */
<a href="WhyBeGreen.htm">Why Be Green</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="WhatWeDo.htm">What We Do</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="services.htm">Services</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="about.htm">About</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="contact.htm">Contact</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="blog.html">blog</a>
</h4>
</p>



</div>
<div id="sidebar">
<div id="image-envelope">

<img src="images/bigbox.jpg" height="329px" width="150px" class="upper" alt="responsible sustainability" />


<img src="images/smallbox.jpg" height="87px" width="150px" alt="Eating is a political act. Alice Waters" class="lower" />
</div>
</div>
<div id="centerbox">

<p class="three"> 85% of the public either think "green" or are "true green" </p>
<p class="four"> .....Do you want them as your customers?</p>
/* won't show true in different sized browsers - either try to get png or gif to work with earth or use list */
/* why some & not recognized? */
<p class="two">
Green practices are good for the environment and your business by attracting customers in the short term and <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; benefiting your bottom line through energy savings <br/> &nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; in the long term.
<br/><br/>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Green Restaurant Strategies develops and
<br/>&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; implements sustainable practice strategies for
<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new properties and assists existing businesses in
<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; determining, developing and managing suitable
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and realistic sustainability procedures for each
<br/> unique situation, allowing you to focus on your guests,staff and sales.</p>
</div>

<div id="footer">

<img src="images/footer.png" width="900" height="55" alt="footer email howard at green restaurant strategies dot com" />

</div>

</div>

</body>
</html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top