Can I use one image as background for a framset?

I have an ASP.net application which has a mixture of classic and .net pages these are all set into a frameset. I have a background which uses a fading colour top to bottom but if I use the same image for each page and the page appears in a different section of the entire screen it looks bad.

Can I assign one image as the background for a frameset - or how could I solve the problem?

Cheers
Graham
<%@ LANGUAGE=VBScript %>
<% Option Explicit %>
<%
if Session("PASS")<>5 then
	Response.Redirect("default.asp")
end if
 
dim strAction
%>
<HTML>
<frameset ID=Admin cols="157,*" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
  <frameset rows="64%,36%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
  	<frame ID="Contents" name="Contents" SRC="<%=Session("MenuSelector")%>">
  	<frame ID="Stats" name="Stats" SRC="Stats.asp">
  </frameset>
  <frameset rows="11%,*" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
    <frame ID="Header" name="Header" SRC="awelcome.aspx">
    <frame ID="Main"  name="Main" SRC="MView.aspx">
  </frameset>
</frameset>
<body background="images/WebFront.jpg">
  <noframes>
  </body>
</html>

Open in new window

gjpittAsked:
Who is Participating?
 
agriesserConnect With a Mentor Commented:
I used tables in combination with iframes (the modern version of a frameset). Framesets are outdated and don't get developed further, future browser versions will likely stop supporting them, so if possible you should change to iframes.

If you want to stick with the good old frameset, you most likely will not get a background image for it.

Regarding the table: You don't need it if you don't want, you can even position the iframes with css to have absolute or relative positions and custom sizes. That way it is even more flexible than th old frameset tag.

It's perfectly fine if yoj don't accept this as solution as I've worked around tbe requested frameset, but as to my knowledge, there's no other solution to Your question.
0
 
balochdudeCommented:
use an iframe. use some javascript to find out the height/width of the screen and size your iframe based on the screen height/width.
0
 
gjpittAuthor Commented:
Hi thanks for coming back so quickly however, I've not used iFrames before and don't know the coding for whay you are suggesting - more help please:)
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
agriesserCommented:
Until CSS3 is out which supports a new option called "background-size", you have to workaround this issue.
One example would be to force the image to be 100% in width and 100% in height, position it absolutely in the top left corner and set its z-index to -1 like shown in the example below.

The good thing with this method (in opposite to the other methods mentioned by querying the window size, etc.) is that it works natively on resizing the browser window too, so no additional coding for that.
<img src="yourimg.jpg" width="100%" height="100%" style="background-position: absolute; top:0; left:0; z-index:-1" />

Open in new window

0
 
agriesserCommented:
Sorry, forgot to mention that this solution works with your current frameset setup and does not need iframes to work.
Simply put this <img> tag at the top of the page you like to have the stretched background.
0
 
gjpittAuthor Commented:
Consideriing the frameset code included above, where would you suggest I put this line

<img src="images/WebFront.jpg" width="100%" height="100%" style="background-position: absolute; top:0; left:0; z-index:-1" >

I've tried various positions but none produce the desired effect. For example:

<%@ LANGUAGE=VBScript %>
<% Option Explicit %>
<%
if Session("PASS")<>5 then
      Response.Redirect("default.asp")
end if

dim strAction
%>
<HTML>
<img src="images/WebFront.jpg" width="100%" height="100%" style="background-position: absolute; top:0; left:0; z-index:-1" >
<frameset ID=Admin cols="157,*" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
  <frameset rows="64%,36%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
        <frame ID="Contents" name="Contents" SRC="<%=Session("MenuSelector")%>">
        <frame ID="Stats" name="Stats" SRC="Stats.asp">
  </frameset>
  <frameset rows="11%,*" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
    <frame ID="Header" name="Header" SRC="awelcome.aspx">
    <frame ID="Main"  name="Main" SRC="MView.aspx">
  </frameset>
</frameset>
<body>
  <noframes>
  </body>
</html>

Produces the image across the entire screen but no frames or other info plus there is a large white border round the screen.

Placing the code under the <Body> tag on any of the called pages only works on the one page not all of them.
0
 
agriesserCommented:
I attached a working example. It consists of serveral files I want to explain.

- babytux.jpg (my image)
- start.html (the html file that has to be opened in your browser)
- test.html (the html file containing the frameset)
- test1.html, test2.html, test3.html, test4.html (the four frame sources)

So basically all you have to do is combine my answer with the one mentioned above about iframes.

start.html contains an iframe with transparent background-color and this iframe hosts the frameset you posted above. start.html also contains the <img> tag that scales an image over the whole screen, thus you'll see a scaled image as background for an iframe.

OK, I didn't attach this file because the html extension isn't allowed for uploading in here, but I uploaded this zip-file to my website, go and get it there:

http://tuxx-home.at/temp/frameset-background.zip
0
 
gjpittAuthor Commented:
I'm sure your answer is great but unfortunately the link gives error 404 could you check the location for me thanks.
0
 
agriesserCommented:
Sorry, I made a mistake while uploading the file.
It's corrected now.
0
 
agriesserCommented:
BTW: If you want to see it in action:

http://tuxx-home.at/temp/frameset-background/start.html

I added some text to the frames to make the scroll bars appear so that you can see how it looks like when the text overlaps the frame boundaries.

I hope this is the solution you expected, otherwise please tell me what I misunderstood.
0
 
gjpittAuthor Commented:
Sorry I can't n image on either your site or mine
0
 
agriesserCommented:
Oh, you're right, I did only test with firefox. It seems as if Internet Explorer doesn't allow framesets to be transparent....

OK, so you should probably kill your frameset statements and migrate completely to iframes. That would look like what's attached in the code snippet below.

BUT: This solution does only work with Firefox and Safari, not with Internet Explorer.

Can I see the background image you're using? Maybe it doesn't need to be stretched which would make things easier...
<HTML>
<body>
<img src="babytux.jpg" width="100%" height="100%" style="background-position: absolute; top:0; left:0; z-index:-1;" >
<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="position: absolute; top: 0; left: 0;">
<tr>
  <td><iframe src="test1.html" width="100%" height="100%" style="background-color: transparent;"></iframe></td>
  <td><iframe src="test2.html" width="100%" height="100%" style="background-color: transparent;"></iframe></td>
</tr>
<tr>
  <td><iframe src="test3.html" width="100%" height="100%" style="background-color: transparent;"></iframe></td>
  <td><iframe src="test4.html" width="100%" height="100%" style="background-color: transparent;"></iframe></td>
</tr>
</table>
</body>
</html>

Open in new window

0
 
gjpittAuthor Commented:
Hi there

Attached file I don't think needs stretching

BTW are you in Austria?
WebFront.jpg
0
 
agriesserCommented:
I can't get it to work with Internet Explorer *grml*

Yes, I'm from Austria.
With Firefox and Safari it looks perfect... See the attached screenshots
firefox-screenshot.PNG
ie7-screenshot.PNG
safari-screenshot.PNG
0
 
gjpittAuthor Commented:
OK Well thanks for your help anyway. I'll leave the question open for awhile in case anyone knows something we don't:)

Family went to Austria at Xmas and found it to bea lovely country.
Cheers
Graham
0
 
agriesserCommented:
Got it!

IE7 needs an extra parameter (allowTransparency) for the iframes.
It now works on all three major browsers on my system, YMMV, so please give it a try.

I updated the links above (the frameset-background.zip as well as the online version).
0
 
gjpittAuthor Commented:
Sorry Error 404 again
0
 
agriesserCommented:
0
 
gjpittAuthor Commented:
I can see what you mean but you have used a table definition not a frameset. With a framaeset page it doesn't work. - sorry
0
 
gjpittAuthor Commented:
Thanks for all your help. I agree that there is no solution to the inital question but I will look into the use of iFrames.
My main problem would be how to address them. At the moment content is posted to a named frame for display.
0
 
agriesserCommented:
You can name iframes to, e.g.:

<iframe src="something.html" name="iframe2"></iframe>

so this iframe would be called "iframe2" and you can send a link to this iframe using the same syntax as you would have used with a frameset:

<a href="somethingnew.html" target="iframe2">click me and I will be opened in an iframe</a>

I prepared an example for this at:

http://tuxx-home.at/temp/frameset-background/test.html
0
 
gjpittAuthor Commented:
Hi again:)

The final solution is shown below. Using two table to recreate the origianl frameset I now have one image across the entire page with transparent backgrounds on the css stylesheet for all pages.

I'm using a javascript menu system from the menu frame which sends pages correctly to each of the designated iFrames.

Many thanks for your help
Graham
<%@ Language=VBScript %>
<%option explicit%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<meta name=vs_snapToGrid content="False">
		<meta name=vs_showGrid content="False">
<title>FrameSet</title>
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
		<meta name="ProgId" content="VisualStudio.HTML">
		<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
</head>
	<body ms_positioning="gridlayout" style="BACKGROUND-IMAGE: url(images/WebFront.jpg); BACKGROUND-REPEAT: repeat-x">
		<table id="table1" style="Z-INDEX:100; LEFT:0px; POSITION:absolute; TOP:0px" top:0px left:0px width="178px" height="100%" border="0">
			<tr>
				<td style="HEIGHT: 300px;BACKGROUND-COLOR: transparent" >
				<iframe scrolling=no name="iFrameMenu" src="<%=Session("MenuSelector")%>" width="100%" height="100%" allowTransparency="true" frameborder=no></iframe>
				Menu
				</td>
			</tr>
			<tr>
				<td style="BACKGROUND-COLOR: transparent">
				<iframe scrolling=no name="iFrameStats" src="stats.asp" width="100%" height="100%" allowTransparency="true" frameborder=no></iframe>
 
				</td>
			</tr>
		</table>
		<table id="table2" style="Z-INDEX:101; LEFT:179px; WIDTH:1000px; POSITION:absolute; TOP:0px; HEIGHT:800px" top:0px left:178px width="1000" height="800" border="0">
			<tr height="11%">
				<td style="HEIGHT: "185px"; BACKGROUND-COLOR: transparent">
				<iframe scrolling=no name="iFrameHeader" src="awelcome.aspx" width="100%" height="100%" allowTransparency="true" frameborder=no></iframe>
				</td>
			</tr>
			<tr height="89%">
				<td style="BACKGROUND-COLOR: transparent">
				<iframe scrolling=no name="iFrameMain" src="MView.aspx" width="100%" height="100%" allowTransparency="true" frameborder=no></iframe>
				</td>
			</tr>
		</table>
	</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.