Changing background of tinymce editor

I have done the following in previous versions without a problem. This is the first site where I am using version 5.5.0.

I changed the body of typography.css so it has an image background:

body {
        /* customize_body */ font: normal normal 14px Arial; /* customize_body */
        /* customize_body */ color: #342000; /* customize_body */
        background:#ffffff url(./images/background.png) repeat-x top;

Once I did this, the editor had the same image background Instead of a white background. Making it very hard to see what you are editing. I viewed a few posts on this subject and added the following within the main.css (In my theme's case va_base.css):

#body #tinymce { color:#000000 !important; background-color:#ffffff !important; }

This has not had any effect. I cleared the cache of my website and browser - no change.

When inpecting the editor with firebug, I noticed the following:

<body id="tinymce" class="mceContentBody " contenteditable="true" spellcheck="false" dir="ltr">

However I cannot tell where it is picking up this css (I would also like to turn the spell check to true).

Any ideas??

The site is

View Replies:
PineCreativeLabs replied on at Permalink Reply
In your typography.css file, do this:

body { background-color: #ffffff; }

Then, in your main.css file, do this:

body { background: url(./images/background.png);
background-repeat: repeat-x;
background-position: left top; }

Hope that helps?
globalnerds replied on at Permalink Reply
Here is what I did that worked:

in typography.css - I removed all references to the background

in my main.css I added the following code:

body { background:#ffffff url(images/background.png) repeat-x top; }

note that I removed the ./ before the images text.

PineCreativeLabs replied on at Permalink Reply
That works too. The way I mentioned seems to work for me. But I guess it's a bit different, depending on how the theme is structured.