Solved

Can I use one image as background for a framset?

Posted on 2008-06-20
22
344 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:gjpitt
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 10
22 Comments
 
LVL 2

Expert Comment

by:balochdude
ID: 21832433
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
 

Author Comment

by:gjpitt
ID: 21832478
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
 
LVL 14

Expert Comment

by:agriesser
ID: 21832670
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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 14

Expert Comment

by:agriesser
ID: 21832686
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
 

Author Comment

by:gjpitt
ID: 21833912
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
 
LVL 14

Expert Comment

by:agriesser
ID: 21834212
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
 

Author Comment

by:gjpitt
ID: 21834240
I'm sure your answer is great but unfortunately the link gives error 404 could you check the location for me thanks.
0
 
LVL 14

Expert Comment

by:agriesser
ID: 21834273
Sorry, I made a mistake while uploading the file.
It's corrected now.
0
 
LVL 14

Expert Comment

by:agriesser
ID: 21834296
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
 

Author Comment

by:gjpitt
ID: 21834443
Sorry I can't n image on either your site or mine
0
 
LVL 14

Expert Comment

by:agriesser
ID: 21834579
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
 

Author Comment

by:gjpitt
ID: 21834612
Hi there

Attached file I don't think needs stretching

BTW are you in Austria?
WebFront.jpg
0
 
LVL 14

Expert Comment

by:agriesser
ID: 21834712
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
 

Author Comment

by:gjpitt
ID: 21834756
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
 
LVL 14

Expert Comment

by:agriesser
ID: 21834803
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
 

Author Comment

by:gjpitt
ID: 21837546
Sorry Error 404 again
0
 
LVL 14

Expert Comment

by:agriesser
ID: 21837582
0
 

Author Comment

by:gjpitt
ID: 21837885
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
 
LVL 14

Accepted Solution

by:
agriesser earned 500 total points
ID: 21837931
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
 

Author Closing Comment

by:gjpitt
ID: 31469217
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
 
LVL 14

Expert Comment

by:agriesser
ID: 21838075
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
 

Author Comment

by:gjpitt
ID: 21842075
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
VBS to download an image from our website 4 47
Writing comments on <p></P> or paragraph 2 23
Use Mid in Html 6 23
PHP $_POST vs asp request 4 28
      Install BugTracker on Windows 2008 server Step 1:  Install windows 2008 server 32 bit OS and configure IIS. Step 2:  Install SQL server ( SQL server 2005 or SQL server 2005 Express edition. The installer for 2008  version isn’t very f…
Introduction (All good things must come to an end (http://en.wikipedia.org/wiki/All_Good_Things...))The original MySQL API (http://php.net/manual/en/book.mysql.php) has gone away, deprecated by PHP in Version 5.5, and removed from PHP in all current…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question