petpage help

[Batman]

I have a picture that I want to use as an image in the background. I want to have a text box floating over the lighter part of the left side. Sort of with an opaque feel. Also I want that box to scroll not just continue down the picture. And for the love of all things holy how do you make the background a simple black. I have tried putting the coding just about everywhere and can't do it.

 

If anyone could help it would be amazing. Sorry for the noobish questions. I am super new to this. Oh and the image is at http://www.neopets.com/~eysana.

[Cornflakes]

As for the opacity of the background of a div, you can do it two ways: CSS or transparent image.

 

Let's make you a div, or what you're calling a "text box." Just copy and paste the following into your petpage codes:

 

<style>
#textbox{width:400px;height:400px;overflow:auto;background-color:black;filter:alpha(opacity=60);opacity:0.6;color:white;font:11px Tahoma;border:1px solid white;margin:50px 0px 0px 50px;}
</style>
<div id="textbox">Text goes here and such and everything, and now you can replace it with whatever you want!</div>

 

Tinker around with that and see what happens.

[Batman]

Thanks that is super useful. When I said black background I more meant for the entire petpage. And is there any way to put that text box over the picture? Would i have to put it into the coding of the picture to do it?

 

EDIT: Finally figured out how to make the background black!

[Cornflakes]

If you have your image set as your body background, the div will go on top of it, yes.

[Batman]

okay last question i hope. Is there any way to make it so the background doesn't tile? I would really just like the picture as the background and the black boarder to fill the rest of the space.

 

EDIT: Nevermind. I found a good guide that is helping me. Thank you for everything!

[Guest Zazi]

Can I just add this bit of info?

table, .sf {display: none;}

This will make the top bar and bottom credits invisible C:

 

 

And I believe this is what you're looking for (in case you didn't in that guide):

(your image as a background, not being repeated and the surroundings black)

body {background: #000000 url("URL HERE") no-repeat;}

 

You could also use this:

body {background: #000000 url("URL HERE") no-repeat; background-attachment: fixed;}

That will also fix your background.. which may work better, or not.

 

Anyway, good luck!

[Cornflakes]

Can I just add this bit of info?

table, .sf {display: none;}

This will make the top bar and bottom credits invisible C:

 

Not everyone wants to hide all tables on their page. Sure this code hides the default Neopet petpage template junk, but it also hides tables, and people might actually want to use tables in their coding.

 

You could also use this:

body {background: #000000 url("URL HERE") no-repeat; background-attachment: fixed;}

 

Or just this:

body{background:#000 url(URLHERE) fixed no-repeat;}

 

That's a lot more efficient, isn't it :)

[Guest Zazi]

Well I just can't work with tables, if I want an image beside a text I just code the img... that's how much I hate them haha but you're right!

[Batman]

For some reason doing the opacity isn't working. I have used it in the code multiple times and neo is deleting it from my code.

 

<style>
#textbox {

width: 450px;
height: 550px;
overflow: auto;
background-color: white;
color: black;
font: 11px Tahoma;
border: 1px solid white;
text-align: center;
padding: 8px;
margin: 85px 0px 0px 120px;
filter:alpha(opacity=60);
opacity:0.6;
}
</style>

 

but it ends with no opacity and when i go back to edit the code it deletes those lines.

[Cornflakes]

Eck, I haven't used the opacity css in awhile. I usually just do images. I guess the filter doesn't allow it anymore. You could try doing this filter workaround --

 

<div id="textbox" style="filter:alpha(opacity=60);opacity:0.6;">Words go here</div>

 

 

or if that doesn't work, you'll have to make a transparent image and set it as your background.

 

You could also split up your background image, then just put a transparent box on it with a graphics program.

 

It's kinda hard to explain to a beginner. :S