Iframes and Background Images

LB

LindBlad

0 0
Asked
Viewed
28.8k times

I tried to search for this here but couldn't find anything.

I wanted to use Iframe in my website but somehow the BG image don't work in IE!!! it works in Mozilla, but like we know, not everybody using Moz.

I know there is some kind of iframe CSS code but i dont have a glue what does that do and how to use it.
This is now weird cause it works in Moz, but not in IE, cause usually things work in IE but not in Moz. ... correct me if im wrong 😉

I also found a code where you can set an opacity to the iframe page but that also makes the text, images etc. that are in iframe, opacity.

<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);" src="bottoniframe.htm" frameborder="0" width="100%" height="100%" id="myiframe" name="myiframe"></iframe>
add a comment
0

15 Answers

  • Votes
  • Oldest
  • Latest
DA

davenewt

0 0
Answered
Updated

Can you not just define a background within the <body> tag of bottoniframe.htm ? As in...

<body background="/path/to/image.gif">

At the moment you just have a plain <body> tag in there.

Cheers,
Dave 😎

add a comment
0
LB

LindBlad

0 0
Answered
Updated

Thanks for the reply davenewt, i could try that, ...but hmmm i guess i tried that already and adding just a 

<body background="middle.gif">

made it just repeat randomly in the ifreame.

I forgot to say im not that good with the code 😟

add a comment
0
DA

davenewt

0 0
Answered
Updated

If the image you are using as a background is small, it will tile automatically (well, technically all images will tile by default, but you only see this if the image is smaller than the size of the window - or in your case, the Iframe).

If you don't want a background image to tile, the alternatives are:

  1. Make the image bigger (if you want a 150 pixel wide coloured bar down the left side of a page, for example, you make an image which is very wide (say 1300 pixels) and just a few pixels high, with a white background and the only left-most 150 pixels coloured. When such an image tiles horizontally you won't see the second occurrence of the image to the right of the first, and as it tiles vertically it will create a coloured bar the height of the window)
    ...or...
  2. Use a small image, set the background using cascading style sheets (CSS) and set the no-repeat, or repeat-x / repeat-y values to control how the image tiles (if at all).

You can start here for info on using CSS:

https://www.w3schools.com/css/css_howto.asp

and check the following link for info on controlling how background images repeat with CSS:

https://www.w3schools.com/cssref/pr_background-repeat.asp

Cheers,
Dave 😎

add a comment
0
DU

Dubya

0 0
Answered
Updated

Just replace your body tag in the bottoniframe.htm file with the following. By adding the following style to the body tag itself instead of an external CSS file, it should fix your problem.

<body style="background-image: url(middle.gif); background-repeat: no-repeat">
add a comment
0
LB

LindBlad

0 0
Answered
Updated

Dubya and davenewt, thanks to you both, i think the code that Dubya pointed is the one im looking for, im in a hurry now but will let you know tomorrow if it turns out good.
Also thanks for the good links davenewt, i will take a look at those later.

... ok i tried it anyway, lol, and this is what happened, the BG img showed ok but now i need it to be "fixed", cause it scrolls with the page.
Where do i add the "fixed" in the code?
The BG img shuld be the same as you see here:

http://www.netikka.net/ville.siuruainen/botton.htm
You see, its just the layout thats shows there. I dont know how to explain it.

add a comment
0
DA

davenewt

0 0
Answered
Updated

If you want the background image in the Iframe to be fixed, just add:

background-attachment: fixed

Thus:

<body style="background-image: url(middle.gif); background-repeat: no-repeat; background-attachment: fixed">

Should do it. Although I'll admit I've never actually tried this myself 😉

//edit - see this page on w3schools.com.

Cheers,
Dave 😎

add a comment
0
TY

typhon

0 0
Answered
Updated

Just out of curiosity would it be that big of a deal to not have a frame at the top of the page. I know alot of people think that by having a frame at the top/bottom/side of a page keeps thier logo/ad/navigation in sight will add to the overall feel of the site. This is true it does add, but not neccessarily in a good way. Personally I used to use frames ALOT on my sites for the above mentioned reasons. However, if you can make your site's overall theme present without being intrusive (sometimes, hell alot of times less is more) but if the content of the site is top quality the more likely people will not only remember your name/nav/ad/blahblahblah but they are more likely to comeback. If you cram something down someones throat by having it permanently on the screen (as with frames) you might be surprised at how little this means to viewers, and how much of your screen real estate is being wasted with your ever present logo. What I mean by this is, if you have a frame on the top of your screen that is say 150 px high you are sacraficeing that much space that your content cant have as the viewer scrolls through the pages, and what if some pertinant piece of info is just off screen and the viewer splits with out getting to it first.... lost visitor, of course this is just MHO

add a comment
0
DU

Dubya

0 0
Answered
Updated

I would like to see what it is you are trying to do with frames. Nowadays, you can do many things with CSS that in the past could only be done with frames. But again, I don't have any idea what it is you are trying to do.
Also, I thought you might find the following information useful, even though you did not ask for it.

body
{ 
background-image: url(middle.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: (see possible values below)
}

[u]Possible Values[/u]
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
45px 24px   (etc...)
78% 43%  (etc...)
add a comment
0
LB

LindBlad

0 0
Answered
Updated

Ok im back now.

@ typhon, my point with the iframe is not to make the "logo" to stay on sight, (i hope i got your point with my poorEnglish) what i am trying to do here is a web site that can be easily updated, by a people that dont know much...well, anything, about web designing...
Thats why i decided to use iframe cause, i thought the source page can be easily edited with Frontpage, but at the same time they cant mess the layout...
... so i thought i just give them the page: bottoniframe.htm and they can just edit that, but the page still looks "good" 😛
I hope you get my point.

I wish i knew the CSS better than i know because i have noticed that you CAN do better looking/working pages with CSS, but im still very novice with it 😟

There is still something weird going on, cause with IE, it looks ok but with Mozilla something is stretching the "layout table", and makes that extra space between the inner and outer table.
I tried to fix it but i just couldnt tell what was wrong with it.

BTW, what is that cool mouse over effect here?
I mean here at the OZZU forum?
Is there some kind of simple way to do it?
Is it this:

<script type="text/javascript" src="fader.js"></script>
add a comment
0
DA

davenewt

0 0
Answered
Updated

i thought i just give them the page: bottoniframe.htm and they can just edit that, but the page still looks "good" 😛
I hope you get my point.

I get what you're trying to do 🙂

I wish i knew the CSS better than i know because i have noticed that you CAN do better looking/working pages with CSS, but im still very novice with it 😟

Give it time and practice, you'll get there.

BTW, what is that cool mouse over effect here?
I mean here at the OZZU forum?
Is there some kind of simple way to do it?
Is it this:

<script type="text/javascript" src="fader.js"></script>

You got it. Do a search for fader.js and you'll doubtless get a bunch of previous posts discussing it. It seems to be a regular talking point 🙂

Cheers,
Dave 😎

add a comment
0
LB

LindBlad

0 0
Answered
Updated

Thanks davenewt, i DID find lots with the search... but well, i guess there wasnt an easy way to do it, lol.

Now, back to wondering the layout table stretching... 🙄

add a comment
0
TY

typhon

0 0
Answered
Updated

I totally get what your trying to do. I have been working on similar projexts for the past 6 yrs or so. Looks like you are headed in the right direction.

You could theoretically do the same effect with php/sql. You need 2 files. Index.php and content.html

the index file whold contain all the elements that you wanted to protect and an include command. Something like this.

index.php

<html>
<head><title></title></head>
<body>
all the code that you would use in the nav frame 
<? php include ("content.html") /?>
</body>
</html>

content.html

file is the file the client/end user edits. This file can be created with any editor including front page. As long as the name of the file and the name of the file in the include match it should work. Of course this may not be the answer you were looking for it was just a thought.

add a comment
0
MV

Mvespa

0 0
Answered
Updated

Hello!

I'm also searching a solution to put the iframe background transparent. But my search finished 1 minute ago... 😁

EUREKAAAA! 🙂

To solve this just put this code on the iframe

< iframe allowtransparency="true"  bla bla bla bla ></iframe>
add a comment
0
LI

lilstorm

0 0
Answered
Updated

eek nm I figured it out. You also have to add this to the iframe page

<style type="text/css">
<!-- BODY {background:none transparent;}-->
</style>
add a comment
0
LB

LindBlad

0 0
Answered
Updated

You could theoretically do the same effect with php/sql. You need 2 files. Index.php and content.html

the index file whold contain all the elements that you wanted to protect and an include command. Something like this.

index.php

Sorry for late reply.

Ok, lol, what if i first learn the CSS and little bit HTML and then start to think what the PHP even MEANS 🤣
Thanks anyway.

kinda messy but things you see there are just exsample, to show "them" what there could be, in just ONE page, cause thats what they wanted,; one page website.

@lilstorm
Cool site you posted ❗
I found a transparent CSS scrollbar there which could do good for my site!

Thanks for Mvespa too.
I will save the codes to my "cool codes" folder 😉

add a comment
0