PDA

View Full Version : I need help



Freeman
08-29-2005, 03:47 PM
I don't know If what I want is java or html but I need help. i would like to put a picture on the background of a page and have the text scroll over it. I don't know how to do this beacuse I am kinda new to the whole scripting thing. If you could help it would be greatly appreciated. JF

Twey
08-29-2005, 04:02 PM
I think what you mean is something like
<style type="text/css">
body { background-attachment: fixed; }
</style>

Add it to the head.

Freeman
08-30-2005, 01:59 PM
So how do I tell it what picture I want as the background? Is it a href after the background attachment?

Freeman
08-30-2005, 02:02 PM
by the way I am new to this whole scripting thing and I am the webmaster at my school. So I get to learn how to do it and do it all at the same time. So any other suggestions that you might have would be greatly appreciated. JF

Twey
08-30-2005, 04:09 PM
Sorry:
<style type="text/css">
body {
background-image: url('images/image.png');
background-attachment: fixed;
}
</style>

Freeman
08-31-2005, 01:39 PM
Is there a way that is less code in html?

Twey
08-31-2005, 02:02 PM
Less code? It's only six lines.
That is the advisable, standards-compliant way to do it. There are others, but they are now deprecated/obsolete and one of them (bgproperties="fixed") was IE-only in the first place.

Freeman
08-31-2005, 02:26 PM
<style type="text/css">
@media visual{
body{
background-image: ('/pics/pic1.jpg');
background-attachment: fixed;
}
}

all.clsMenuItemNS{font: bold x-small Verdana; color: white; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;}
A:hover {color: red;}
</style>

Here is where I put it. Does it matter that there is another thing in the style before it closes or did I enter it wrong or am I just a retard?

Twey
08-31-2005, 03:37 PM
Nope, that's fine.
After Mike's had a look at it:

<style type="text/css">
@media screen, projection {
background: #ffffff url(/path/to/image) fixed;
}
</style>
I'm not sure if he deliberately missed the body declaration out or if it's a form of shorthand unbeknownst to me; if that doesn't work, use:

<style type="text/css">
@media screen, projection {
body {
background: #ffffff url(/path/to/image) fixed;
}
}
</style>

Freeman
08-31-2005, 03:50 PM
<style type="text/css">
@media, projection {
body {
background: #ffffff url (pics/pic1.jpg) fixed;
}
}

all.clsMenuItemNS{font: bold x-small Verdana; color: white; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;}
A:hover {color: red;}
</style>

It still didn't work. And does it apply the background picture to only this page?

mwinter
08-31-2005, 08:16 PM
@media, projection {This is a syntax error, as is:


url (pics/pic1.jpg)In the first case, you need a media type to follow the @media at-rule, not a comma. In the second case, a space must not follow the url keyword. Though spaces can appear between tokens in CSS, 'url(', including the open parenthesis, is a complete token and cannot be broken up.


@media screen, projection {
body {
background: #ffffff url(pics/pic1.jpg) fixed;
color: #000000;
}
}Note that the colours here (white; #ffffff, and black; #000000) are just suggestions. As I don't know what your image looks like, I could be suggesting completely inappropriate values.

Mike

Freeman
09-01-2005, 01:44 PM
Sweet it worked. Thanks Twey and mwinter for the tips. just one more question. Is there a way to have the picture centered? without it being all over the page? I also need to lighten the image so I can read the text. Can you do that with scripting or do I need to use Adobe. I thank you both for the help. Greatly appreciated. JF

Twey
09-01-2005, 02:37 PM
Centering the image: use background-position: center;
Lightening the image: only with filters, which are IE-only. Use Adobe.

Freeman
09-01-2005, 02:40 PM
But when I do that it centers it but it still fills the rest of the page with the picture. I want the one picture by itself in the center. Not copys where there is more space. Why can't this be eay. thanks for being patient with me. JF

Twey
09-01-2005, 02:43 PM
Use
background-repeat: no-repeat
to stop it repeating.

mwinter
09-02-2005, 11:58 AM
Centering the image: use background-position: center;

Use
background-repeat: no-repeat
to stop it repeating.As you might guess, these can also be combined into the current shorthand declaration:


body {
background: white url(pics/pic1.jpg) fixed no-repeat center;
color: black;
}Order, in this case, isn't important.

Mike

Freeman
09-02-2005, 02:40 PM
Thanks to both of you for the help. The pages are looking alot better. If you want to see what they look like when they are completed I will give you the link when I am done making them. I still have lots of work to do and again thanks for all the help. You two are the greatest.

Freeman
09-14-2005, 04:33 PM
Here is some of the pages that have the pic in the background http://www.campion.net/Sports/ms.htm thanks for the help twey and mwinter. JF