Solved

Can I use one image as background for a framset?

Posted on 2008-06-20
22
336 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
  • 11
  • 10
22 Comments
 
LVL 2

Expert Comment

by:balochdude
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 14

Expert Comment

by:agriesser
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Sorry, I made a mistake while uploading the file.
It's corrected now.
0
 
LVL 14

Expert Comment

by:agriesser
Comment Utility
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
Comment Utility
Sorry I can't n image on either your site or mine
0
 
LVL 14

Expert Comment

by:agriesser
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:gjpitt
Comment Utility
Hi there

Attached file I don't think needs stretching

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

Expert Comment

by:agriesser
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Sorry Error 404 again
0
 
LVL 14

Expert Comment

by:agriesser
Comment Utility
0
 

Author Comment

by:gjpitt
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
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.

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now