If you're just new to Javascript and CSS, you should probably avoid IFRAMES if possible.
You can have divided up areas and different backgrounds (colors or pictures) without IFRAMES. Unless there is some unusual changing content or restriction you want to impose upon the visitor of your webpage, why do you need IFRAMES?
To put a background in a simple HTML page, just make a body tag like this:
Code:
<BODY bgcolor="black" bgimage="mypattern.jpg">
If you want to use CSS to have different background images in different areas,
try making a CSS file (a text file with the extension .css)
with something like this in it:
Code:
/*=========== myfile.css ========*/
/* this area is reserved for comments
and explanations:
place this file in the same directory as your webpage
and load it in the HEAD section as follows:
<link rel="stylesheet" type="text/css" href="myfile.css" />
(cut and paste the above line into your HEAD section.
If you change the name of your .css file update the name here too.)
Any images referred to in the .css file here should be located relative to this
file.
To keep it simple just put them all in the same directory with your .css and
webpage.
Don't remove the comment markers: " */ /*"
The following examples define backgrounds for some common items.
=============*/
/* ====================== header or paragraph title:
this form of the background parameter takes two arguments,
separated by a space: the background color, and an image. */
h1 {color:black; background: white url(bgheader.jpg); }
/* ========================= paragraph === */
p {color:black; background: url(bgparagraph.jpg); }
/* ======== our own special id label with unique features ===
to use this, put an id tag in a unique div marker:
<DIV id=specialarea1 > (your stuff here) </DIV>
Your text will have the color and background defined below: */
#mytitle { width: 50%; }
#specialarea1 { width: 60%;
color: black;
background: blue url(bgspecial.jpg); }
#textarea2 { width:80%;
color: yellow; background: black url(bgtext.jpg)}
Okay: Now here is a webpage:
Code:
<HTML>
<!--======= FILENAME: test1.html =======-->
<HEAD><!--=========== BEGIN HEAD ====-->
<title>test1.html</title>
<link rel="stylesheet" type="text/css" href="myfile.css" />
</HEAD><!--====== END HEAD ====-->
<!--========== BEGIN BODY ====-->
<BODY bgcolor="black" background="mypattern.jpg" >
<DIV id=specialarea1>
<h1 id=mytitle>Title </h1>
<p>A generic paragraph with some text in special area 1.
The background of the text is the special area1 background image.</p>
<br /><br /><br /><br />
<h1>Another Header with no ID</h1>
<DIV id=textarea2>
<p> Here is some garbage in text area 2 with another background.
<br/> and some more text.<br /><br /><br /><br /> </p>
</DIV> <!--======== end of textarea2 ===-->
</DIV> <!--========= end of specialarea1 ===-->
</BODY><!--=========== END BODY ====-->
</HTML>
In my working directory I have the following files:
Code:
test.html (the webpage)
myfile.css (the css textfile)
mypattern.jpg (main webpage background)
bgheader.jpg (the header background image)
bgtext.jpg (text background image)
bgspecial.jpg (special area bg image)
And here is a link to the example:
test1.html
Now you have a working example that you should be able to modify to suit your needs. Make sure your background images or patterns have low contrast and a fairly homogenous color that is different from the text you want overtop, so it will be readable.
Junior Coders
IFrame and Div
Posting Permissions
Reply With Quote
Bookmarks