[SOLVED] Body color and image together
 

Hi there, I've spent 30 minutes looking through the forum to find the solution before posting but still was not able to resolve this... it's such a simple problem but I can't get a body image PLUS background color to show together. Here's the site under development: http://choose-light.com/


I have the following code in ATO - Body text & links - body style

font-family: Georgia, serif;
font-size: 1em;
padding-top: 125px; padding-bottom: 20px;
background: #EEEEEE; url(/wp-content/themes/atahualpa/images/spectrum_body.png) no-repeat top center;

Depending on the browser, I can see the background color OR the image but not both. Testing on current versions of FF, Chrome and IE on Vista as well as 10.6.8. I've tried with a .jpg and same results.

Running: Atahualpa 3.7.9
Wordpress 3.4.2
No cache plugin enabled
Running Multisite

One thing is there should be no semicolon after the color... Just a space

Also when I put the url directly to your image I see nothing. Is that the correct spelling including case?

THANK YOU so much, it was the semicolon after the color that was gumming up the works, I wound up changing the file type to a .jpg, that's why the .png was not showing for you. This is huge for me to have this resolved, thank you!!


I have another question, I can't seem to hold onto the rounded corners in the body - I have the following in Body Text and Links, Body Style:

font-family: Georgia, serif;
font-size: 1em;
line-height: 23px;
padding-top: 125px; padding-bottom: 20px;
background: #EEEEEE url(/wp-content/themes/atahualpa/images/spectrum_body.jpg) no-repeat top center;
/*trying to add radius to upper corners of above image but not sure it's doing anything*/
-moz-border-top-left-radius: 15px;
-moz-border-top-right-radius: 15px;


And also this in Style & configure Layout, Layout Container Style:

padding: 0px;/*This effectively only affects top/bottom padding */
background: #ffffff;

box-shadow: 0 0 15px #333;
-moz-box-shadow: 0 0 15px #333;
/* uncomment next block for round corners */

-moz-border-radius:15px;
-khtml-border-radius: 15px;
-webkit-border-radius:15px;
border-radius: 15px;
-khtml-border-top-left-radius: 15px;
-khtml-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;

If you go to my site and refresh the page you can see the rounded corners in FF and Chrome for a split second but then they go back to being square...

I will make another donation to the forum to thank you for your help, it's much appreciated!!!

the radius is there, your issue is the image has square edges and is overlaying the round corners. You need to give #imagecontainer the same corners.

Thank you so much again, that did the trick! Thread closed!

Best Wishes to you - Deb