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>

Recommended Answers

All 5 Replies

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.

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.

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>

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.