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

sfmalo sfmalo at msn.com
Mon May 14 03:52:48 CDT 2001

Sagar -
Thanks for your suggestion. I just read your reply after having responded to
Elfur's reply (which see). Actually, the solution was keeping the CSS just
as it is but changing "no-repeat" to "repeat-x" (and, of course, taking out
the "fixed" which was a last-ditch play on my part!). Using "repeat-x" tiles
the graphic horizontally with no vertical tiling. Then, the bgcolor displays
below (which was what I was after).

It was a matter of perception on my part. I thought the bgcolor was
overriding the background image. It wasn't. Just appeared to.

Thanks for your time. Really appreciate it. Guess we all learned something
over the weekend. And, it surely feels so good to have finally solved this
(<8 (<8(<8

> What I really think is that in your CSS you are using background-image and
> background-color attributes together. So one has to surely override over
> other. Both cannot be used simultaneously according to me. If you want
> background image and color together for in case if the image is small then
> you probably will have to write it as :
>   background : url("image file name") background color ;
> thats all. I have myself tried it out and it works fine.
> Sagar.
> >From: "sfmalo" <sfmalo at msn.com>
> >Reply-To: thelist at lists.evolt.org
> >To: <thelist at lists.evolt.org>
> >Subject: [thelist] CSS - bgcolor overrides bckgrd image (was CSS -
> >background image keeps repeating)
> >Date: Sat, 12 May 2001 17:14:24 -0700
> >
> >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.
> >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
> >could get it to display was to incorrectly include the value "fixed"
> >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
> >Adult Retreat pages. The background color rides in front of the
> >graphic! Of course, now the graphic does not repeat (ta, da), but the
> >background color property blocks out the background!!!! Are we having fun
> >yet?
> >
> >I've spent hours trying everything I can think of, but no answer. I've
> >the "shorthand" and "longhand" method of declaring the BODY CSS
> >Each of the three pages has a slightly different display of CSS code.
> >tried moving the order of the values, making bgcolor transparent,
> >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.
> >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
> >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
> >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.*//
> >
> >   BODY
> >
> >   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