Putting a background under a frameset

What I am trying to do is probably very simple. I currently have frames in my index.html. I have a top, left, right bottom and center frame. This makes my page look pretty awkward. Here is my index.html:

    <html>
    <head>
    <title>Support Portal</title>
    </head>
    <frameset rows="28,*,5" frameborder="0" border="0" framespacing="0">
        <frame name="topNav" src="top_nav.html" scrolling="no" noresize>
    <frameset cols="110,*,110" frameborder="0" border="0" framespacing="0">
        <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
        <frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
    </frameset>
        <frame name="footer" src="footer.html">
    <noframes>
    <p>This section (everything between the 'noframes' tags) will only be displayed if the users' browser doesn't support frames. You can provide a link to a non-frames version of the website here. Feel free to use HTML tags within this section.</p>
    </noframes>

    </frameset>
    </html>

What I was hoping to do was take my 'content.html' and all of my other html files and make the background-color transparent, and then put a background image behind everything so the page would look more like 1 page, instead of 5 put together. Here is the top of my content page:

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    body {
        font-family:Ubuntu, sans-serif;
        font-size:10pt;
        margin:10px;
        background-color:transparent;
        }
    a {
        color:white;
        }

How would I go about accomplishing this?

Solution

Nope, with frames, each document is separate and nothing else is allowed (mostly, the code at the bottom may work in some browsers...) You could kind of hack it in like so:

In css for top_nav.html:

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
}

In css for menu_1.html:

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: -28px 0;
}

In css for content.html:

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: -28px -110px;
}

In css for related.html:

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: -28px right;
    /* this may not work as the image may be too big... */
}

In css for footer.html:

body {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: bottom 0;
    /* this may not work as the image may be too tall... */
}

That will be the solution to most likely work across browsers... however, I think the following works in some browsers.

frameset {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
}