Inline text box over static picture?

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Hey,
I am trying to figure out how to place an inline scrolling text box over a
picture. I see that I can place a background picture, but that scrolls with
the text. I want the picture to stay still while you scroll the text up and
down. Any help?
Thanks,
Curtis
 
Try putting the picture in a layer (that is, a <DIV>) and the text in a layer
with the same left, top, width, and height, but a z-order at least one
greater than that of the picture layer.

However...

It's almost always a bad idea to display text over a picture. The irregular
picture background makes the text hard to read.

Jim Buyens
Microsoft MVP
http://www.interlacken.com
Author of:
*-----------------------------­-----------------------
|\----------------------------­-----------------------
|| Microsoft Windows SharePoint Services Inside Out
|| Microsoft Office FrontPage 2003 Inside Out
||----------------------------­-----------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/----------------------------­-----------------------
*-----------------------------­-----------------------
 
Put the form into a positioned container (like a layer) and position it
above the picture. Or make the image the background of the form's
container, or even of the form itself (although I'm not sure that's
supported widely).
 
On the background picture, add in the css style
background-attachment: fixed;


in message
: Hey,
: I am trying to figure out how to place an inline scrolling
text box over a
: picture. I see that I can place a background picture, but
that scrolls with
: the text. I want the picture to stay still while you
scroll the text up and
: down. Any help?
: Thanks,
: Curtis
 
OK, Thanks for your replies, however I must be missing something...I have
tried layers and am able to get text with a background picture but not
"scrolling" text. Everytime I add the "inline frame" it has a solid
background instead of transparent. I don't know of any other way to add
scrolling text without an inline frame...I am still a newbie so I must be
missing something. Any more help?
Thanks,
Curtis
 
Why not assign the background image to page that is being loaded into the IFrame?

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WebMaster Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================
 
Because the picture scrolls with the text...I want the picture to stay locked
while the text scrolls up or down.

I am trying to keep my text in the "sky" portion of the picture, so I have a
larger picture in the background and then the inline frame on the top portion
of the picture where the text will be legilble over the sky only. Again, my
big problem is that I can't figure out how to make the inline background
transparent.

I may be going about this in the completely wrong way as I am a newbie
trying to figure it out.

Thanks,
Curtis
 
You can use either CSS or you can set the watermark option under page properties for the background
image.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WebMaster Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================
 
Try this, replacing 271 (in three places) with your picture width, 204 (in
three places) with your picture height, and images/deepimpact.jpg with your
picture name.

<div id=piclayer style="position:absolute; top:20px; left:20px;
width:271px;height:204px ">
<img border="0" src="images/deepimpact.jpg" width="271" height="204">
</div>
<div id=txtlayer style="position:absolute; top:20px; left:20px;
width:271px;height:204px; z-index:2; overflow:scroll" >
<p style="color:yellow">this is the text<br>this is the text<br>this is the
text<br>this is the text<br>this is the text<br>this is the text<br>this is
the text<br>this is the text<br>this is the text<br>this is the text<br>this
is the text<br>this is the text<br>this is the text<br>this is the
text<br>this is the text<br>this is the text<br>this is the text<br>this is
the text<br>this is the text<br>this is the text<br>this is the text<br>this
is the text<br>this is the text<br>this is the text<br>this is the
text<br>this is the text<br>this is the text<br>this is the text<br>this is
the text<br>this is the text<br>this is the text<br>this is the text<br>this
is the text<br>this is the text<br>this is the text<br>this is the
text<br></p>
</div>

However, once again, I have doubts about the readability of the text in any
such scheme.

Jim Buyens
Microsoft MVP
http://www.interlacken.com
Author of:
*-----------------------------­-----------------------
|\----------------------------­-----------------------
|| Microsoft Windows SharePoint Services Inside Out
|| Microsoft Office FrontPage 2003 Inside Out
||----------------------------­-----------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/----------------------------­-----------------------
*-----------------------------­-----------------------
 
Ok, Thanks Jim! That is working...now I only have two problems...it has a
scroll bar at the bottom which is not needed and is in the way(over the
picture) and also everything centered on the page instead of being to the
right side of the page where I placed the cell.
Thanks!!!
Curtis
 
Back
Top