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 24, 2009

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> </p>[/tt].

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

Feherke.

http://rootshell.be/~feherke/

cygmorg · Aug 24, 2009

take away the <style> tag

feherke · Aug 24, 2009

Hi

cygmorg said:
take away the <style> tag

Why ? Excepting the missing [tt]type[/tt] attribute there is nothing wrong with that.

Feherke.

http://rootshell.be/~feherke/

cygmorg · Aug 24, 2009

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.

cygmorg · Aug 24, 2009

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

feherke · Aug 24, 2009

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.

http://rootshell.be/~feherke/

cygmorg · Aug 24, 2009

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

TrojanWarBlade · Aug 24, 2009

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.

jlockley · Aug 24, 2009

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" "

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

<html xmlns="

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

<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('

http://www.greenrestaurantstrategies.com/bkg.html');

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>

BillyRayPreachersSon · Aug 24, 2009

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:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

BillyRayPreachersSon · Aug 24, 2009

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:

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

feherke · Aug 25, 2009

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.

http://rootshell.be/~feherke/

ChrisHunt · Aug 25, 2009

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

jlockley · Aug 25, 2009

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.

spamjim · Aug 25, 2009

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.

jlockley · Aug 25, 2009

that's already been changed. Thanks. Working on it now.

jlockley · Aug 26, 2009

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

http://www.greenrestaurantstrategies.com

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 "<"
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", 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

?

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/> …

BillyRayPreachersSon · Aug 26, 2009

Can you post the code you are now using, or a URL to it?

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

jlockley · Aug 26, 2009

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" "
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> 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>         <a href="WhatWeDo.htm">What We Do</a>         <a href="services.htm">Services</a>         <a href="about.htm">About</a>         <a href="contact.htm">Contact</a>       <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/>           benefiting your bottom line through energy savings <br/>  &nbsp               in the long term.
<br/><br/>

                      Green Restaurant Strategies develops and
<br/>   
                  implements sustainable practice strategies for
<br/>                      new properties and assists existing businesses in
<br/>                  determining, developing and managing suitable
<br/>          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>

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

Technical User

Programmer

Technical User

Programmer

Technical User

Technical User

Programmer

Technical User

Programmer

Technical User

Programmer

Programmer

Programmer

Programmer

Technical User

Instructor

Technical User

Technical User

Programmer

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor