PDA

View Full Version : HTML thing - how do you make text slide on background?



Heavyporker
24-04-05, 06:35
Been pushing hard on a personal HTML project (quite a doozy, if I may say so).

I was wondering how to make the background stay in one place while the text scrolls up. Might be called floating or sliding, or something.

Think of it as something you'd like if you have a non-tileable background, and instead of the browser tiling it all over the place and making it real ugly, you tell it - hey... that background's not supposed to move. just let that text scroll up and down, okay? That way, everything looks real nice.


(oh, and this is a non-frames thing)

retr0n
24-04-05, 11:01
Been pushing hard on a personal HTML project (quite a doozy, if I may say so).

I was wondering how to make the background stay in one place while the text scrolls up. Might be called floating or sliding, or something.

Think of it as something you'd like if you have a non-tileable background, and instead of the browser tiling it all over the place and making it real ugly, you tell it - hey... that background's not supposed to move. just let that text scroll up and down, okay? That way, everything looks real nice.


(oh, and this is a non-frames thing)


I'm not sure if this is 100% what you were looking for, but here goes. You do
this via CSS (Cascading Style Sheets). You can learn all about CSS and other
related stuff on W3Schools.com (http://www.w3schools.com/)

I think this is what you are looking for. Clicky! (http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment)

Hope it helps.

Morganth
24-04-05, 14:44
CSS is for customising your HTML tags, so you can change how the text looks when you use a tag like <b>. The idea of CSS is so that you can make up your own tags and use them throughout your webiste without having to add all the formatting handles into each block of text.

If you want scrolling text, that'll be a JScript or Flash job. You could make it into an animated GIF and slap that in.

EDIT: Never realised you could do that with CSS, my bad. Although, I'd never use CSS to do the job as not everywhere supports it fully. I'd stick to making the text animated personally.

Dribble Joy
24-04-05, 15:49
Scrolling marquee > all.

Heavyporker
24-04-05, 15:53
NO, no, NO!

Thank you for the advice, but I used to be able to do that with just HTML ( bgmove = '0') or something - but I can categorically state it does not require CSS, flash, or java.

Richard Blade
24-04-05, 15:57
One of the ways that I've seen it done is to make the whole page, or maybe just a portion of it into a table. You can set it up with one large catagory and stuff the page in there. Usually the back ground holds still on a table that requires a slide bar.
Might not help, but I hope it gives a direction to try.

Regards,
RB

Dribble Joy
24-04-05, 15:59
I should really read things first...

enigma_b17
24-04-05, 16:31
in your CSS style sheet put this in the body element

body
{
background-repeat: no-repeat;
background-position: center;
}

and yes you can do it in html, u simply re-format the code to somed like

<body bgProperties=fixed background="images/pagebg.gif">

that will make the image stay in the center of the window while it scrolls

Heavyporker
24-04-05, 16:34
Hm, wasn't a table.. but I don't know the term for this, so I can't google for it very effectively.

anyways, that table idea *is* interesting, and might work... but I think the nice table windows with internal scrolling is a script thing. :(


Man! I wish my old laptop hard drive didn't die on me... I had that html tutorial I downloaded with the little.htm files that I practiced with.

There distincly *is* a way to set the whole webpage so only the text scrolls up/down -the background just stays. I'm sure it was the bgmove = 0.... *sigh* so frustrating for me, since this project I have is exciting me so much.

See, I'm making my homesite grow up. Bring it into the more mature me - college art gallery, Neocron site with FAQ/guide/links/RP stories that I saved (not just ime - Delmanns and all the others on the RP forum - edited so you don't have the annoying breaks between chapters or the replies).

I created a pretty nice background inspired by my living room wall when it's sunset and the sun comes through the blinders and creates this beautiful shadow-effect.. mmmm...

Bad thing about this, of course, is that it's not tileable. Looks horrible as it is now, when you scroll up and down. That's what I want to fix that background in one place, just make the text scroll up and down. Then that background looks ever so nice!

edit - OMG, I think that's the one! THANKS! You rock! If you're on Terra - you can get one <50k item free from my store. Just PM me beforehand with character name.

naimex
24-04-05, 16:44
nevermind, didnt see the answer already given.

Heavyporker
24-04-05, 18:22
Alright, since Dreamweaver does CSS, I tried that. That was diastrous. Just made the background pic stay in one place while you could scroll everywhere, and now you can just see that ugly-ass background color behind the background pic.

Trying to figure out how to beat back the CSS so i can try the body tag thing.


EDIT - non-CSS html tag works PERFECT. This is the one I've been looking for. Enigma, don't forget the little token of gratitude I've mentioned above.

aKe`cj
24-04-05, 18:55
... but I think the nice table windows with internal scrolling is a script thing. :(


script != synonym for difficult....

there are two VERY simple ways to archive that:

a) IFRAME (inlay whutever thingy frame)


<iframe src="../../../showthisinsidethewindow.htm" width="90%" height="400" name="HTML_in_a_box">
<p>If you can read this text your screen is working + your browser aint supporting iframes...but they suck anyway so who cares</p> </iframe>

WARNING: expect to be treated alike an AOL-User on quakenet when using iframes :D


b) add a scrollbar to a <div> container


<div style="width: somepixels; height: somepixels; overflow : auto;">
this scrolls if its bigger than the div
</div>


btw.. look at this page's source (concentrate on the "code" fields of course)