Expanding Iframes/divs background
 

I have a website which uses an iframe to load up the homepage content, this iframe is located within a DIV which I have tried to add a background to, however the background only spans the length of the content (written words, not the iframe length) and then the background of the DIV changes to the proper site background.
I'm kinda new at all this so I'm not sure if its even right xD


if you don't understand me the link is: http://www.habbonowfm.com/risingfm/index.html

#rightcolumn {

        float: left;

        background-repeat: repeat-y;

        margin: 0px 0px 0px 0px;

        padding: 5px;

        width: 520px;

        background-image: url(images/mainbackground.png);

}





<div id="rightcolumn">

                   <p><iframe name="main" id="main" src="home.html" width="510" frameborder="0" allowtransparency="yes" scrolling="no" target="main" height="427" ></iframe>

</p>

                   </div>

Re: Expanding Iframes/divs background
 

bump

Re: Expanding Iframes/divs background
 

If I were you, I'd skip the whole iframe thing and either use
<ol>
<li>Static Pages</li>
<li>ServerSide Includes</li>
<li>PHP Includes</li>
<li>Javascript / JQuery Tabs</li>.
</ol>
However, in regards to your question, where is the content problem?
Using an iframe as a block element, it is like an flash object, and it loads an entirely different page, not just text, so you'd have to style that other page with the background.
Still, try using a jquery tabs option, which allows google to index the page and allows you to keep all the content on the page.

Re: Expanding Iframes/divs background
 

The iframe is set to transparent so the background of the DIV "rightcolumn" will be able to be seen, however the background only shows underneath the text, instead of filling the whole thing.

Alternatively, I could use expanding iframes, which also expand the DIV, although I'm unsure on how to go about this.

Re: Expanding Iframes/divs background
 

To answer your question, just add a background to the #wrapper div.
Make the bg image the size of the two columns, combining the images, for the effect you with to achieve (to leave a little of the page bg at the top, try adding a little margin at the top.

Hope that Helps!

<FAKE SIGNATURE>

Re: Expanding Iframes/divs background
 

That does help, thanks very much. I've now fixed my little problem, but where you stated to use a margin.
I type in

margin-top:15px;

into the #wrapper but still get the background appearing above the site.


EDIT:The other little problem was on the #header, and not the #wrapper. I have now solved this :)

Thanks very much for all your help, these tips will be remembered.