I-frame background [Archive] - Lissa Explains it All: Web Design Forums

Marks_Smoothie

06-08-2005, 08:51 PM

Hiya,
First of all I've read all the posts on transparent i-frames, but I didn't find this anywhere.
Seeing as my layout isn't online yet, I'll try to explain it the best way I can.
I've made a layout in Photoshop and in Frontpage I've inserted an i-frame.
I've set everything right to make it transparent.
The problem is, that my layout is very multi-coloured. And my i-frame remains white. If I change the background page color, my i-frame color changes too.
So basically, my i-frame is transparent, but it responds to the changes made on my background page instead of allowing my layout to show.
Can anyone help?

kittycat

06-09-2005, 01:33 AM

Could you post your code or perhaps upload a test page? It might help to fix the problem

Marks_Smoothie

06-09-2005, 07:08 AM

Could you post your code or perhaps upload a test page? It might help to fix the problem

Sure, for my i-frame I used </iframe src="main.html" name="main" width="350" height="540" frameborder="0" allowtransparency="true"></iframe>

And this is my external css sheet:
body {background-color: transparent;
font-family: "Century Gothic";
text-transform: none;
color: #fb40f9;
scrollbar-DarkShadow-Color: #e2fbfa;
scrollbar-Track-Color: #e2fbfa;
scrollbar-Face-Color: #e2fbfa;
scrollbar-Shadow-Color: #fb40f9;
scrollbar-3dLight-Color: #fb0f9;
scrollbar-Highlight-Color: #e2fbfa;
scrollbar-Arrow-Color: #000000;
}
a:visited { color:#fb40f9; }
a:link { color:#fb40f9; }
a:active { color:#fb40f9; }
a:hover { color:#fb40f9; }

hr {color:#fb40f9;}

.SB_shoutbox { font-size:8pt; }

I'm thinking I left something out in the CSS file, or I'm linking something wrong

Marks_Smoothie

06-09-2005, 05:36 PM

I've uploaded my testpage aswell.
http://www.westlifebelgium.com/colorfull.html
Do you see the background? That's what you always get when you save your layout optimised and open it in Frontpage. So basically, my i-frame takes the color of that page, instead of my layout.
Is there any way to fix that? Or do I just have to find a way, to make that background page part of my layout?
I can't upload my css file yet, 'cause I still have my old layout up, but I posted it up here.

kittycat

06-09-2005, 08:59 PM

Don't use frontpage, that might be one cause of your problem.
You also have a background colour specified in the body tag you should remove, and when I look at your CSS there's also a background colour specified that isn't transparent like you posted.

Yuki H.

06-09-2005, 09:52 PM

Marks_Smoothie

06-10-2005, 05:53 PM

Thanks!
I fixed the problem by putting the background image in the table on my iframe page. Lol, weird explanation but it works.
Just another question though.
If I scroll my i-frame, I need my backround to stay locked. 'Cause if you scroll to the right, my background moves along and then it's not nicely lined anymore.
How do I keep my background image locked while I scroll???

Yuki H.

06-10-2005, 07:23 PM

Add
background-attachment: fixed;

inside the part that says body{

in your css. =D hope that helps

Marks_Smoothie

06-11-2005, 10:17 AM

Hmmm, it doesn't work.
See, the background image isn't specified in my body, it's in my td
body {font-family: "Century Gothic";
text-transform: none;
color: #fb40f9;
scrollbar-DarkShadow-Color: #e2fbfa;
scrollbar-Track-Color: #e2fbfa;
scrollbar-Face-Color: #e2fbfa;
scrollbar-Shadow-Color: #fb40f9;
scrollbar-3dLight-Color: #fb0f9;
scrollbar-Highlight-Color: #e2fbfa;
scrollbar-Arrow-Color: #000000;
}
a:visited { color:#fb40f9; }
a:link { color:#fb40f9; }
a:active { color:#fb40f9; }
a:hover { color:#fb40f9; }

hr {color:#fb40f9;}

.SB_shoutbox { font-size:8pt; }

p {}
td {background-image: url(backgroundmain.jpg);
background-attachment: fixed;
}

And if I fix the background attachment there, it still moves when I scroll

kittycat

06-11-2005, 02:14 PM

Could you not specify the background in the body instead, or does it not give the look you want?

Marks_Smoothie

06-12-2005, 02:27 PM

No, it doesn't give the look I want.
Lol, I know I'm difficult!!!
I guess I'll just have to live with the fact that it moves if you scroll left or right.
Normally, people won't have to scroll left or right 'cause I made it so that everything fits in my i-frame.
You only have to scroll up and down and then nothing looks wrong. It's just when you scroll left and right, but you're not supposed to

Jessie_James

06-17-2005, 03:14 PM

Just a thought, i maybe to late on this but i posted a similar question on here, the thread can be found here,

http://www.lissaexplains.com/forum/showthread.php?t=76677

Or go to the frames section and look for my thread: IFrame Background The answer is at the bottom and it works great for me.

Hope this helps you.

MaGiCSuN

06-17-2005, 03:54 PM

I made a tutorial on iframes... Many people understand it. If you want, I could give you the link through PM.
This should be there

<iframe name="main"
src="main.html" framespacing=0
frameborder=0
noresize allowtransparency=true
style="filter: chroma(color=#colorhere)"
width=350 height=540>
</iframe></td>

body {background-color: transparent;

That part, you should define a colour.

Your main.html coding should look something kinda like this:

<html>
<head>
<base target="main">
<title>Your site title</title>
<link rel=stylesheet href="backgroundcolor.css" type=text/css>
</head>
<body background="images/image_06.jpg">
<br><br><br><br><br>
<p class="head">Header here</p>
Contenet
<p class="head">Header II</p>
your text here<br>
your text here <br>
your text here<br>
your text here<br>
your text here<br>
your text here<br>
your text here<br>
your text here<br>
your text here<br>
your text here<br>
your text here<br>
your text here<br>
your text here<br>
your text here<br>
</body>
</html>
<body background="images/image_06.jpg">
Change images/image_06.jpg
to your background image for that iframe
Eg: lets say your main.html background is hello.jpg
<body background="hello.jpg">
is the way to display it.
Hope that helped.

I like that layout and the pixel stretch you used.

Please i BEG you, do some research before making your own tutorial !
you don't need the chroma filter to make a transparent background. Plus your css has no ending } and your iframe coding has a </td> tag in it.
I'm telling you this because this is how people learn bad habbits ..

on to the problem:

delete the background in your body tag.
also in your css the td{} part is empty .. so it's a bit hard to see where the problem is at the moment.
do keep in mind that with td you will change EVERY cell, so that is/was probably the problem aswell...

<iframe src="main.html" name="main" width="342" height="545" frameborder="0" allowtransparency="true" scrolling="auto">
<IMG SRC="images/colorfull_05.gif" WIDTH=342 HEIGHT=546 ALT=""></iframe>

you have all these codes ... delete the image between the <iframe> and </iframe> tag. Either add them on the page that loads inside the iframe or add the image as a background to the <td> tag (not recommended).

plus you are linking the same stylesheet in all the iframes ..
keep in mind that every page will show the same background then ...

Love,
Mirna