Background problem

I was just curious about the body table thing. Haven’t seen it before. No biggie.

One more change for the body element:
Change the background color from #ffffff to #533996. That is the color of the background image & will make a big difference in the look of the page.

body {
    background: url("../images/index.png") no-repeat scroll 50% 0 [COLOR="#0000FF"]#533996[/COLOR];

The page width is 1100px. The image width is 1024px. Adding the background color will mask the difference.

That did work! Thank you so much for your insights, I will try to say more next time lol

I didn’t address the issue of the image moving up the page. Did that come clear by magic or are we still working on that?

it was actually moving to the right so the centering of the background fixed that. One more thing, when I put the background color into the code the whole background just becomes white. I put it in like your example shows.

Doesn’t look like the color has been changed from white.

This is what I see in your css:

background: #[COLOR="#FF0000"]FFFFFF[/COLOR] url(../images/index.png) no-repeat scroll 50% 0;

For what it’s worth, the superfunproductions page has 3 significant mismatched tags. These leave the behavior of the page up to the discretion of different browsers. I highly recommend fixing these. Add the blue tags where noted.

Line 70:
Div wrapup does not have a close tag:
<div id=“wrapup”>
I can’t be sure where it is supposed to close. I would guess below Line 104, though.

Line 76:
This list item does not have a close tag:

<li id="games"><a href="games.html">Games</a>[color=blue]</li>[/color]

Line 96:
The first anchor does not have a close tag:

<div class="slides_container"><a href="CC.html"><img src="images/games/CCpic.png" alt="crystal catacombs" height="500" width="800" border="0" />[color=blue]</a>[/color]<a href=


I think the “background” shortcut might be causing you some grief.

The shorthand version of the background property applies a default background color of #fff, even if none is specified.

In other words, if you declare:

background:#533996 url("../images/index.png") no-repeat scroll 50% 0;    /* background-color specified */

in your home stylesheet, the background color will be purple.

If you omit a color or subsequently import another background image using the rule:

background:url("../images/games.png") no-repeat scroll 50% 0;    /* without specifying a background-color */

the background-color will be white because the default applied by the second rule will override the value specified in the first rule.

(The following suggestions apply to each stylesheet.)

  1. One plan would be to specify the background color in all of the shortcuts.

  2. A better method (albeit not shortcut “cool”) is to specify the background properties separately (instead of using the shortcut). Insodoing, you only declare the “background-color:” once in the first style and it is never overwritten when subsequent rules declare only the “background-image:” property.

  3. If you are a diehard shortcut user, an easy workaround to the background shortcut defaults is to specify the following rule above the first background shortcut style which will override the defaults in subsequent shortcuts.

background-color:#533996 [color=blue]!important[/color];

In case my speculation and explanation are a bit messy, the following reference should clear things up:


You are right, I was putting it in the wrong place. derp.

Great! The background is max purple, now. Thanks for the feedback! Cheers.