Background Image not displaying on webpage

Question

spiderguy84 0 Newbie Poster

15 Years Ago

I have setup an .php that uses a template I made with Dreamweaver. I would like to have a background image behind the content, stripes show up everywhere except the table. Here is my code for the template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title><style type="text/css">
<!--
body {
	background-image: url(http://www.backgroundlabs.com/backgrounds/358.gif);
	background-repeat: repeat;
}
-->
</style><font size="+4">~~~FeedTitle~~~</font></title>
<meta name="description" content="~~~FeedDescription~~~">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
a {
	font-size: 30px;
}
.a font {
	text-align: center;
}
</style></head>
<link href="http://www.feedforall.com/rss2html/ffa-29.css" rel=stylesheet type=text/css>
<body bgcolor="#FFFFFF" background="http://www.backgroundlabs.com/backgrounds/358.gif">
<img src="http://www.316apps.com/headerlogo.png" width="965" height="203" />
<h1 align="center" class="a"><b>~~~FeedTitle~~~ </b></h1>
<table width="100%" border="1" cellspacing="0" cellpadding="8" align="center" bordercolor="#333333">
  <tr valign="center" bgcolor="#F4F4F4"> 
    <td width="88%" height="2" class="a"><font size="+6"><CENTER>~~~FeedDescription~~~</CENTER></font></td>
  </tr>
</table>
<span class="a"><br>
~~~BeginItemsRecord~~~ ~~~FeedMaxItems=50~~~ 
</span>
<table width="75%" border="1" cellspacing="0" cellpadding="10" align="center" bordercolor="#666666">
  <tr valign="top"> 
    <td height="47"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="15" align="center">
        <tr valign="top" bgcolor="#F4F4F4"> 
          <td height="23" width="50%"> 
            <p class="a"><span class="cc"><b><font size="+5">~~~ItemPubShortDate~~~</font></b> <a href="~~~ItemLink~~~">~~~ItemTitle~~~</a></span></p>
            </td>
        </tr>
         <tr valign="top"> 
          <td height="17" width="50%"><span class="cc"> <span class="a"><font size="+5">~~~ItemDescription~~~</font></span></span></td>
        </tr> 
       </table>
   </td>
  </tr>
</table>
<p><span class="a">~~~EndItemsRecord~~~ </span>
<p align="center">copyright Company Name 2006 all rights reserved; <br>
  <font size="-6">rss2html template created by <a href="">FeedForAll</a><br>
  </font> </p>
</body>
</html>

In the design window in Dreamweaver, I can see the background stripes, but when I upload the template to my server and view it, there is only white background. Can anyone help me with this?

graphics:image html-css web-design

6 Contributors
9 Replies
198 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Dandello

Dani AI

Generated 6 Months Ago

A concise troubleshooting summary based on the thread: three things usually stop a background from showing in the browser even when Dreamweaver preview looks fine — malformed head/HTML that prevents the browser from parsing CSS (as hinted), an opaque element (tables or a wrapper) covering the page, and a background image that never actually loads (wrong path, hotlink protection or mixed‑scheme blocking). and demonstrated the right CSS approach, and ’s cache point is worth remembering.

Practical diagnostic sequence: inspect the live output (View Source) to confirm the CSS is actually in the head of the generated page (Dreamweaver’s template preview can differ from the pushed HTML). Use the browser Developer Tools: select the html/body element and check the Computed styles to see which rule supplies the background and which stylesheet it comes from. In the Network panel reload and confirm the image request exists and returns HTTP 200; open the image directly in a new tab to verify it isn’t hotlink‑blocked or missing. Temporarily make table cells transparent or remove their bgcolor to check whether the pattern is present under page content.

Fixes to try after diagnosis: correct any validation errors so the browser can read stylesheet rules, host the background image on the same origin or use a scheme‑matching URL to avoid mixed‑content and hotlink issues, and ensure any external RSS stylesheet isn’t overriding the body background (place a body/html rule late in the cascade). Clear server/CDN and browser caches after changes.

For narrowing down a remaining issue, the exact items needed are the live page URL, the browser used, and screenshots or snippets of the DevTools Computed and Network views showing the background rule and the image request status.

All 9 Replies

hielo 65 Veteran Poster

15 Years Ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title><font size="+4">~~~FeedTitle~~~</font></title>
<meta name="description" content="~~~FeedDescription~~~">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="http://www.feedforall.com/rss2html/ffa-29.css" rel='stylesheet' type='text/css'>
<style type="text/css">
a {
    font-size: 30px;
}
.a font {
    text-align: center;
}


body {
    background: #FFFFFF url(http://www.backgroundlabs.com/backgrounds/358.gif) scroll repeat top left;
}

</style>
</head>
<body>
...

MagicMedia 10 Junior Poster

15 Years Ago

I have setup an .php that uses a template I made with Dreamweaver. I would like to have a background image behind the content, stripes show up everywhere except the table. Here is my code for the template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title><style type="text/css">
<!--
body {
	background-image: url(http://www.backgroundlabs.com/backgrounds/358.gif);
	background-repeat: repeat;
}
-->
</style><font size="+4">~~~FeedTitle~~~</font></title>
<meta name="description" content="~~~FeedDescription~~~">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
a {
	font-size: 30px;
}
.a font {
	text-align: center;
}
</style></head>
<link href="http://www.feedforall.com/rss2html/ffa-29.css" rel=stylesheet type=text/css>
<body bgcolor="#FFFFFF" background="http://www.backgroundlabs.com/backgrounds/358.gif">
<img src="http://www.316apps.com/headerlogo.png" width="965" height="203" />
<h1 align="center" class="a"><b>~~~FeedTitle~~~ </b></h1>
<table width="100%" border="1" cellspacing="0" cellpadding="8" align="center" bordercolor="#333333">
  <tr valign="center" bgcolor="#F4F4F4"> 
    <td width="88%" height="2" class="a"><font size="+6"><CENTER>~~~FeedDescription~~~</CENTER></font></td>
  </tr>
</table>
<span class="a"><br>
~~~BeginItemsRecord~~~ ~~~FeedMaxItems=50~~~ 
</span>
<table width="75%" border="1" cellspacing="0" cellpadding="10" align="center" bordercolor="#666666">
  <tr valign="top"> 
    <td height="47"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="15" align="center">
        <tr valign="top" bgcolor="#F4F4F4"> 
          <td height="23" width="50%"> 
            <p class="a"><span class="cc"><b><font size="+5">~~~ItemPubShortDate~~~</font></b> <a href="~~~ItemLink~~~">~~~ItemTitle~~~</a></span></p>
            </td>
        </tr>
         <tr valign="top"> 
          <td height="17" width="50%"><span class="cc"> <span class="a"><font size="+5">~~~ItemDescription~~~</font></span></span></td>
        </tr> 
       </table>
   </td>
  </tr>
</table>
<p><span class="a">~~~EndItemsRecord~~~ </span>
<p align="center">copyright Company Name 2006 all rights reserved; <br>
  <font size="-6">rss2html template created by <a href="">FeedForAll</a><br>
  </font> </p>
</body>
</html>

In the design window in Dreamweaver, I can see the background stripes, but when I upload the template to my server and view it, there is only white background. Can anyone help me with this?

For starters, there are a ton of errors in this code. I just inputted this into WC3 validation and there are 20 errors and 1 warning. Try to correct those errors and then try again.

clark angus 0 Newbie Poster

15 Years Ago

wow great info i am also using wc3 now

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

spiderguy84 0 Newbie Poster · Answer 1 · 2010-09-23T01:35:32+00:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title><font size="+4">~~~FeedTitle~~~</font></title>
<meta name="description" content="~~~FeedDescription~~~">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="http://www.feedforall.com/rss2html/ffa-29.css" rel='stylesheet' type='text/css'>
<style type="text/css">
a {
    font-size: 30px;
}
.a font {
    text-align: center;
}


body {
    background: #FFFFFF url(http://www.backgroundlabs.com/backgrounds/358.gif) scroll repeat top left;
}

</style>
</head>
<body>
...

Made those changes and it still doesn't show.

ko ko 97 Practically a Master Poster · Answer 2 · 2010-09-23T19:46:26+00:00

Try this:

body {
background: #FFFFFF url('backgrounds/358.gif') scroll repeat top left;
}

hielo 65 Veteran Poster · Answer 3 · 2010-09-23T22:11:17+00:00

on my previous post, I forgot to include the css for the tables, but the background does show up for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>~~~FeedTitle~~~</title>
<meta name="description" content="~~~FeedDescription~~~">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="http://www.feedforall.com/rss2html/ffa-29.css" rel='stylesheet' type='text/css'>
<style type="text/css">
a {
    font-size: 30px;
}
.a font {
    text-align: center;
}


body {
    background: #FFFFFF url('http://www.backgroundlabs.com/backgrounds/358.gif') scroll repeat top left;
}
table{background-color:white;}
</style>
</head>
<body>
<img src="http://www.316apps.com/headerlogo.png" width="965" height="203" />
<h1 align="center" class="a"><b>~~~FeedTitle~~~ </b></h1>
<table width="100%" border="1" cellspacing="0" cellpadding="8" align="center" bordercolor="#333333">
  <tr valign="center" bgcolor="#F4F4F4"> 
    <td width="88%" height="2" class="a"><font size="+6"><CENTER>~~~FeedDescription~~~</CENTER></font></td>
  </tr>
</table>
<span class="a"><br />
~~~BeginItemsRecord~~~ ~~~FeedMaxItems=50~~~ 
</span>
<table width="75%" border="1" cellspacing="0" cellpadding="10" align="center" bordercolor="#666666">
  <tr valign="top"> 
    <td height="47"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="15" align="center">
        <tr valign="top" bgcolor="#F4F4F4"> 
          <td height="23" width="50%"> 
            <p class="a"><span class="cc"><b><font size="+5">~~~ItemPubShortDate~~~</font></b> <a href="~~~ItemLink~~~">~~~ItemTitle~~~</a></span></p>
            </td>
        </tr>
         <tr valign="top"> 
          <td height="17" width="50%"><span class="cc"> <span class="a"><font size="+5">~~~ItemDescription~~~</font></span></span></td>
        </tr> 
       </table>
   </td>
  </tr>
</table>
<p><span class="a">~~~EndItemsRecord~~~ </span>
<p align="center">copyright Company Name 2006 all rights reserved; <br />
  <font size="-6">rss2html template created by <a href="">FeedForAll</a><br />
  </font> </p>
</body>
</html>

spiderguy84 0 Newbie Poster · Answer 4 · 2010-09-23T22:59:45+00:00

Not for me. I put it in there and uploaded to my server and it still doesn't show the background

hielo 65 Veteran Poster · Answer 5 · 2010-09-23T23:45:10+00:00

What browser are you using? What's the url to your page?

Dandello 8 Posting Whiz in Training · Answer 6 · 2010-09-24T04:56:52+00:00

Some servers cache the pages, especially css files so you have to use CRTL F5 to force the refresh.

Background Image not displaying on webpage

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers