Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Frames & Backgrounds in XHTML

Status
Not open for further replies.
CSUKNic

CSUKNic

Technical User
Feb 3, 2002
62
GB
Hi,

So far you guys have helped me a lot, so here's another really bloody stupid problem I just cannot solve. The site I am writing uses a number of frames, but what I want to do is to have a single background image on screen and put all the frames on top of it. I can change the background within each frame with no problem, but cannot seem to find a way of having a single background that the frames simply sit on top of. I hope that makes sense.!

I have tried using CSS background-image, but because the frames are setup on a page with no <body> tag, it ignores this. So I have pasted the source below..... Please can somebody tell me what I am doing wrong..

Code: 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="TonicWeb"/>
<title>Rookery Manor Bridal</title>
<style type="text/css">
body 
{
background-image:
url("backgound.gif")
}
</style>
<script language="JavaScript1.2" type="text/javascript">
<!--if (parent.location.href!=window.location.href)parent.location.href=window.location.href;-->
</script>
</head>
	<frameset cols="190,*" framespacing="0" franeborder="0" border="0">
		<frameset rows="60,*">
			<frame src="rmblogo.html" id="top_left_logo" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
			<frame src="menu_module.html" id="menu_module" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
			<frame src="always_blank.html" id="blank_baseline" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
		</frameset>
		
		<frameset rows="10,*,30,70">
			<frameset cols="70,30,*">
				<frame src="blank_namespace.html" id="blank_frame" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
				<frame src="vertical_tip.html" id="vertical_tip" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
				<frame src="blank_abovebody.html" id="blank_body" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
			</frameset>
			<frameset cols="70,30,*">
				<frame src="gown_name_gen.html" id="gown_name" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
				<frame src="vertical_mid.html" id="vertical_mid" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
				<frame src="main_welcome.html" id="main_body" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
			</frameset>
			<frameset cols="70,30,*,10">
				<frame src="horizontal_left.html" id="horizontal_left" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
				<frame src="cross.html" id="middle_cross"  frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
				<frame src="horizontal_mid.html" id="horizontal_right" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
				<frame src="horizontal_tip.html" id="horizontal_tip" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
			</frameset>
			<frameset cols="70,30,*">
				<frame src="blank_left.html" id="blank_left" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
				<frame src="vertical_lower.html" id="vertical_lower" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
				<frame src="designer_name_gen.html" id="designer_name" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
			</frameset>
			<frameset cols="*">
				<frame src="always_blankb.html" id="blank_mainbaseline" frameborder="0" framespacing="0" border="0" scrolling="no" noresize="noresize"/>
			</frameset>	
		</frameset>
	
	</frameset>
	
</html>
 
Sort by date Sort by votes
The only thing I can think of is splitting the image up into two separate images and using those as backgrounds for the individual frames. If anyone else has a more useful solution, please post.
 
Upvote 0 Downvote
You can't put a background image on the frameset page and hope it will show through on the frames. That's not how frames work - the content of each frame is a self-contained web page with its own background properties.

You can, as gohankid77 says, give seperate background images to each of the frames that make up the desired result (that's probably the easiest solution).

Alternatively (and better) you can ditch frames in favour of CSS-positioned <div>s which you can style to look and behave in a similar fashion to frames but without their many disadvantages.

-- Chris Hunt
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
825
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
791
PeDa
PeDa
Alt255
  • Locked
  • Question
Navigate to bookmark in local file
Replies
2
Views
724
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top