Putting a background under a frameset

StackOverflow https://stackoverflow.com/questions/15690996

Question

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?

Was it helpful?

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;
}

OTHER TIPS

You shouldn't use frames at all. It's old and not reliable. What you should use is divs. If you want only one part of the page to change, you can use javascript and jQuery.

When using divs, you can use background property in CSS to manipulate the background of specific element, e.g.:

background-color: #FFF;

You also should use a seperate CSS file and link to it in the head tag (BEFORE any javascript file):

<link rel="stylesheet" type="text/css" href="styles.css">

The modern way of doing what you are trying to do, is with Javascript. You want to have many static pages and built a web site with out having to edit 10 pages every time you want to add something on the menu for example.

I don't agree with you but anyway, you are looking for Ajax content load (you load your pages into one).

Or you can built your main page layout and then put iframes with can have the pages background.

I realy dont think that you should do tha but...

<html>
    <head>
        <title>Support Portal</title>
        <style>
            body{
                /*background-image here*/
            }
        </style>
    </head>
    <body>
        <div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;">
            <iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe>
            <div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;">
                <div style="position:relative;height:100%;width:100%;">
                    <iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe>
                    <div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;">
                        <iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe>
                    </div>
                    <iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe>
                </div>
            </div>
            <iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe>
        </div>
    </body>
</html>

It is working

Try it works for me

<html>
<head>
    <title>Support Portal</title>
    <style>
        HTML{
            /*background-image here*/
        }
    </style>
</head>
<body>
    <div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;">
        <iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe>
        <div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;">
            <div style="position:relative;height:100%;width:100%;">
                <iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe>
                <div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;">
                    <iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe>
                </div>
                <iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe>
            </div>
        </div>
        <iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe>
    </div>
</body>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top