[thelist] CSS - bgcolor overrides bckgrd image (was CSS - background image keeps repeating)

sfmalo sfmalo at msn.com
Sat May 12 19:15:42 CDT 2001

Thanks to several of you who responded to my previous predicament. The
background graphic no longer repeats (ta, da). BUT, the bgcolor now sits
somewhat askew on top of the background graphic, destroying the design. So
that you can get an idea of what I'm faced with, if you're interested in
helping, please go to http://www.survivingburns.org/index_prototype3.htm.

The first three pages (Home, Adult Retreats, and Burn Treatment) are the
only ones I've re-designed for the client to choose from ... and are the
only ones I've been working on trying out the CSS.  The "Burn Treatment"
page is the only one that will display the background image. The only way I
could get it to display was to incorrectly include the value "fixed" right
after "no-repeat". Because you've shown me that "fixed" is not
browser-compatible" AND because it overrides the "no-repeat" value, the
background image is back to tiling again!!!!

However, if I take out "fixed" then you'll see what happens on the Home and
Adult Retreat pages. The background color rides in front of the background
graphic! Of course, now the graphic does not repeat (ta, da), but the
background color property blocks out the background!!!! Are we having fun

I've spent hours trying everything I can think of, but no answer. I've used
the "shorthand" and "longhand" method of declaring the BODY CSS attributes.
Each of the three pages has a slightly different display of CSS code. I've
tried moving the order of the values, making bgcolor transparent, stripped
everything out of the <.body> tag, put it back in, took it back out, changed
the background graphic's name taking out an underscore, blah, blah. Also,
there is now nothing in the <.body> tag except onLoad instructions. Perhaps
the <.table>s are structured wrong? I just don't know anymore. Did strip out
most cellpadding from the tables just in case.

Could someone look at my CSS coding by viewing the source on the pages and
perhaps clue me in as to what I'm doing wrong? Perhaps it's something
written wrong in the rest of the CSS?? I really haven't done much with that
part yet (have no pseudo classes, etc.). That's next, but not until I can
get everything looking the way it should.

Here's two examples (if you don't want to go to the site):

file://*This one prevents tiling but displays bgcolor in front of background
graphic blocking almost all of it from view -->*//


  margin: 0px ;
  font-family: arial, helvetica, sans-serif ;
  font-size: medium ;
  font-weight: 700 ;
  color: #6600CC ;
  background-color: #330099 ;
  background-image: url(purplegradient1.gif) ;
  background-repeat: no-repeat }

  file://*This is another that displays the background image but did not
prevent tiling.*//


  margin : 0px ;
  font-family: arial, helvetica, sans-serif ;
  font-size: medium ;
  font-weight: 700 ;
  color: #6600cc ;
  background-color: #330099 ;
  background-image: url(background_purplegradient1.gif) ;
  background-repeat: no-repeat fixed }

Sharon F. Malone
"web design and Internet writing services"

More information about the thelist mailing list