I want to update my site having text in the front and using background images in the back of my webpages (I want to do this for SEO optimization), what is the best html/css way to do this?
The current way I am doing this is not rendering correctly in IE8, but IS rendering properly in Firefox:
(Try this link in both IE8 and in Firefox) https://drchrono.com/dental-practice-management-software/
I don't see any background images in your sample page. If you just want to add a background image to your body tag with css it could be as simple as
<style>
body {background-image:url('background.gif');}
</style>
You're currently using a background on what seems to be actual content. My advice is - use backgrounds only for layouts, not for content.
Image tags score higher because of the "alt" tag and as a bonus people can find them with an image search.
Before you continue with the background issue I suggest you first try to get your site to validate. There are a few small issues that may be causing the page to not render properly in IE/Opera. Like the <style> within a <td>. Once the site validates it'll be much easier to do diagnostics, esp. with a problem like the one you're experiencing.
For a bonus you'll have improved SEO if your site validates. For an interesting read regarding validation & SEO: SEO & Importance of Valid Source Code