...

View Full Version : Background Image



9homie
05-13-2008, 08:49 PM
Hello.

When I am coding, I want the background image to stay where it is and then I can type in it.
For an example of what I mean, look at this:
www.pokemonbattlearena.net, then you can see a grey box with ALL the writing, well the writing STAYS in there when you scroll up and down, and it also fits all screen resolutions.

So I need to be able to do that on my webpage. Could someone please post the code.

Thank You
9homie

jcdevelopment
05-13-2008, 09:00 PM
#wrapper {
background-image:url(whatever.gif);
background-repeat:repeat;
width:800px;
margin:0 auto;
}

once you start writing data in that CSS property it will embed and not move!
is that what u were looking for?

9homie
05-13-2008, 09:01 PM
Sort of. Just to ask. Will that be like the site that i said?

Also when it says repeat, WILL it repeat the image loads?

9homie
05-13-2008, 09:03 PM
<html>
<head>
<title>Pok&eacute;mon Oracle</title>
<script>
//body {background-image:url(background2.png); background-attachment: fixed; background-repeat: no-repeat; position: absolute;}
</script>
<style>
wrapper {
background-image:url(background2.png);
background-repeat:repeat;
width:800px;
margin:0 auto;
}
.links {position:absolute; left:120&#37;; top:20%}
.title {position:absolute; left:50%; top:5%; margin-right: 10%; width: 826%; height: 184%;}
.explanation {top:300%;}
.newstitle {top:100%;}
.news {top:200%;}
</style>
</head>
<body leftmargin="50" rightmargin="50" bgcolor="#780000>
<hr color="red" width="95%">
<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>
<td><b><h3>Join The Game!</h3></b><hr color="red"><br />
<center><a href="register.php">Register</a><br />
<a href="login.php">Login</a></center><br />
<b><h3>Other Features</h3></b><hr color="red"><br />
<center>
Home/News<br />
News Archive<br />
Forums<br />
Chat Box<br />
</td>
</tr>
</table>
<p class="title"><b><h1>Pok&eacute;mon Oracle</h1></b></p><br /><br /><br /><br /><br /><br /><br />
<p class="explanation"><font face="comic sans ms">Welcome to Pok&eacute;mon Oracle, have you ever thought
'I really want to play<br /> Pok&eacute;mon online!' well now you can!<br /><br />
Just come here and all your Pok&eacute;mon needs will be gone!<br />
Pok&eacute;mon Oracle is a NEW online pokemon game where you can train and<br /> catch
as many pokemon as you can!<br />
The best thing about all of this, is that it is absolutely
FREE!<br />
Trainers from all over the world come here to train their pokemon and have<br /> a load of fun!
<br /><br />
When you sign up to Pok&eacute;mon Oracle, you can experence all the things about<br /> being
a pok&eacute;mon trainer.<br /><br />
So come on in and have some fun training pok&eacute;mon.</font></p><br /><br />

<center>
<b><h1><font face="comic sans ms"><u><p class="newstitle">News</p></u></font></h1></b><br />
</center>

<p class="news"><b>10th May 2008</b><br />
Pok&eacute;mon Oracle was first thought of.<br /><br />
<b>11th May 2008</b><br />
The first building process of Pok&eacute;mon Oracle started.<br /><br /></p>
</body>
</html>


That is what i have got at the moment, but the background is all black, and it is not meant to be.

jcdevelopment
05-13-2008, 09:04 PM
Yes it is like the site.

No what it does is it will repeat the image to the amount of content that is added. It has a fixed width to it, and it will repeat all the way down!

jcdevelopment
05-13-2008, 09:06 PM
<div id="wrapper">

<hr color="red" width="95&#37;">
<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>
<td><b><h3>Join The Game!</h3></b><hr color="red"><br />
<center><a href="register.php">Register</a><br />
<a href="login.php">Login</a></center><br />
<b><h3>Other Features</h3></b><hr color="red"><br />
<center>
Home/News<br />
News Archive<br />
Forums<br />
Chat Box<br />
</td>
</tr>
</table>
<p class="title"><b><h1>Pok&eacute;mon Oracle</h1></b></p><br /><br /><br /><br /><br /><br /><br />
<p class="explanation"><font face="comic sans ms">Welcome to Pok&eacute;mon Oracle, have you ever thought
'I really want to play<br /> Pok&eacute;mon online!' well now you can!<br /><br />
Just come here and all your Pok&eacute;mon needs will be gone!<br />
Pok&eacute;mon Oracle is a NEW online pokemon game where you can train and<br /> catch
as many pokemon as you can!<br />
The best thing about all of this, is that it is absolutely
FREE!<br />
Trainers from all over the world come here to train their pokemon and have<br /> a load of fun!
<br /><br />
When you sign up to Pok&eacute;mon Oracle, you can experence all the things about<br /> being
a pok&eacute;mon trainer.<br /><br />
So come on in and have some fun training pok&eacute;mon.</font></p><br /><br />

<center>
<b><h1><font face="comic sans ms"><u><p class="newstitle">News</p></u></font></h1></b><br />
</center>

<p class="news"><b>10th May 2008</b><br />
Pok&eacute;mon Oracle was first thought of.<br /><br />
<b>11th May 2008</b><br />
The first building process of Pok&eacute;mon Oracle started.<br /><br /></p>
</div>


I messed up on the code, look back at my example!

You just need to wrap your content in the div

9homie
05-13-2008, 09:11 PM
I am trying to put the image in as a background like you said. But it just all turns red and doesn't do the image i did.

I wrote it:



wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:800px;
margin:0 auto;
}


Is that right? Should it work?

jcdevelopment
05-13-2008, 09:14 PM
#wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:800px;
margin:0 auto;
}

i missed the #, so try it with that in your CSS

9homie
05-13-2008, 09:19 PM
1) I forgot to take away the actual background color, that is why it kept going red.
2) It doesn't work. It makes the thing go into the middle. BUT it makes the border on the right side, GONE... I need that back...

jcdevelopment
05-13-2008, 09:25 PM
#wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:800px;
}

9homie
05-13-2008, 09:28 PM
Ok then, i have done that.
When i have done... I need the rest of the white background to be the same color as the pic border.
When i set a body bgcolor, will it delete my pic?



<style>
#wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}
</style>

<body bgcolor="red">
</body>


What will that do to it?

jcdevelopment
05-13-2008, 09:29 PM
just make the body red!

9homie
05-13-2008, 09:33 PM
Ok then.
I think this is the last thing, but there might be more.

I have got everything into the box and then i can't move the writing on the left, more to the right... How do i do that?

jcdevelopment
05-13-2008, 09:36 PM
well it depends you could do this


<p style="padding-left:20px;">sdggdfgdfgdggdfg</p>

9homie
05-13-2008, 09:40 PM
Nope, that doesn't work for me....

jcdevelopment
05-13-2008, 09:44 PM
<p style="margin-left:20px;">sdggdfgdfgdggdfg</p>

9homie
05-14-2008, 08:17 AM
No, that doesn't work either. I need something that will work.

At the moment as well my website background, when i put it on the web, goes all red.
The background image doesn't come.

Also the writing is still stuck on the left of my background image.

jcdevelopment
05-14-2008, 04:12 PM
not sure whats going on or if its being done right.

Post the code with everything you have done, including CSS and html on one page. I will take a look at it.

9homie
05-14-2008, 05:40 PM
Well i actually made the text move to the middle. So that was fine.

So now i can't move the title...
Here is the code:



<html>
<head>
<title>Pok&eacute;mon Oracle</title>
<script>
//body {background-image:url(background2.png); background-attachment: fixed; background-repeat: no-repeat; position: absolute;}

</script>
<style>
#wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}
.links {position:absolute; left:75&#37;; top:20%; text-align:right;}
.title {left:50%;}
.explanation {top:300%; text-align:center;}
.newstitle {top:100%;}
.news {top:200%; text-align:center;}
</style>
</head>
<body leftmargin="100" rightmargin="50" bgcolor="#740000">

<div id="wrapper">

<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>
<td><b><h3>Join The Game!</h3></b><hr color="red"><br />
<center><a href="register.php">Register</a><br />
<a href="login.php">Login</a></center><br />
<b><h3>Other Features</h3></b><hr color="red"><br />
<center>
Home/News<br />
News Archive<br />
Forums<br />
Chat Box<br />
</td>
</tr>
</table>
<p class="title"><b><h1>Pok&eacute;mon Oracle</h1></b></p><br /><br /><br /><br /><br /><br /><br />
<p class="explanation" "margin-left:20px;"><font face="comic sans ms">Welcome to Pok&eacute;mon Oracle, have you ever thought
'I really want to play<br /> Pok&eacute;mon online!' well now you can!<br /><br />
Just come here and all your Pok&eacute;mon needs will be gone!<br />
Pok&eacute;mon Oracle is a NEW online pokemon game where you can train and<br /> catch
as many pokemon as you can!<br />
The best thing about all of this, is that it is absolutely
FREE!<br />
Trainers from all over the world come here to train their pokemon and have<br /> a load of fun!
<br /><br />
When you sign up to Pok&eacute;mon Oracle, you can experence all the things about<br /> being
a pok&eacute;mon trainer.<br /><br />
So come on in and have some fun training pok&eacute;mon.</font></p><br /><br />

<center>
<b><h1><font face="comic sans ms"><u><p class="newstitle">News</p></u></font></h1></b><br />
</center>

<p class="news"><b>10th May 2008</b><br />
Pok&eacute;mon Oracle was first thought of.<br /><br />
<b>11th May 2008</b><br />
The first building process of Pok&eacute;mon Oracle started.<br /><br /></p>

</div>

</body>
</html>

jcdevelopment
05-14-2008, 06:01 PM
you didnt put the style in your html

before


<p class="explanation" "margin-left:20px;">

after


<p class="explanation" style="margin-left:20px;">

it works then!

jcdevelopment
05-14-2008, 06:07 PM
if you want also, upload the background image and i can make sure that it is working correctly.

9homie
05-14-2008, 06:39 PM
How do i do that?

jcdevelopment
05-14-2008, 06:55 PM
when you do
"post reply"

scroll down and look for "manage my attachments" and upload the image.

Then i can grab it and see whats wrong!

9homie
05-14-2008, 06:59 PM
This is the background :D

jcdevelopment
05-14-2008, 07:48 PM
Its doing exactly what it needs to be doing. You arent getting the full picture at the bottom because the contten doesnt expan that far down. Othere then that its doing what i think you want it too do.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />


<title>Pok&eacute;mon Oracle</title>
<script>
//body {background-image:url(background2.png); background-attachment: fixed; background-repeat: no-repeat; position: absolute;}

</script>
<style>
#wrapper {
background-image:url('background2.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}
.links {position:absolute; left:75&#37;; top:20%; text-align:right;}
.title {left:50%;}
.explanation {top:300%; text-align:center;}
.newstitle {top:100%;}
.news {top:200%; text-align:center;}
</style>
</head>
<body leftmargin="100" rightmargin="50" bgcolor="#740000">

<div id="wrapper">

<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>
<td><b><h3>Join The Game!</h3></b><hr color="red"><br />
<center><a href="register.php">Register</a><br />
<a href="login.php">Login</a></center><br />
<b><h3>Other Features</h3></b><hr color="red"><br />
<center>
Home/News<br />
News Archive<br />
Forums<br />
Chat Box<br />
</td>
</tr>
</table>
<p class="title"><b><h1>Pok&eacute;mon Oracle</h1></b></p><br /><br /><br /><br /><br /><br /><br />
<p class="explanation" style="margin-left:20px;"><font face="comic sans ms">Welcome to Pok&eacute;mon Oracle, have you ever thought
'I really want to play<br /> Pok&eacute;mon online!' well now you can!<br /><br />
Just come here and all your Pok&eacute;mon needs will be gone!<br />
Pok&eacute;mon Oracle is a NEW online pokemon game where you can train and<br /> catch
as many pokemon as you can!<br />
The best thing about all of this, is that it is absolutely
FREE!<br />
Trainers from all over the world come here to train their pokemon and have<br /> a load of fun!
<br /><br />
When you sign up to Pok&eacute;mon Oracle, you can experence all the things about<br /> being
a pok&eacute;mon trainer.<br /><br />
So come on in and have some fun training pok&eacute;mon.</font></p><br /><br />

<center>
<b><h1><font face="comic sans ms"><u><p class="newstitle">News</p></u></font></h1></b><br />
</center>

<p class="news"><b>10th May 2008</b><br />
Pok&eacute;mon Oracle was first thought of.<br /><br />
<b>11th May 2008</b><br />
The first building process of Pok&eacute;mon Oracle started.<br /><br /></p>

</div>

</body>
</html>

9homie
05-14-2008, 07:49 PM
I know that.

When i go on the actual website, the background doesn't come up.
Look:

http://pokemonoracle.biz.tc/

and you can see the background image that i showed you DOESN'T come up...

jcdevelopment
05-14-2008, 07:54 PM
this what you have now



#wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}


change it to



#wrapper {
background-image:url('background2.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}


You have #4, you gave me the second one

9homie
05-14-2008, 07:58 PM
DONE...

So now, what should i do to get it right?

jcdevelopment
05-14-2008, 08:00 PM
well, is it where you want it? Centered?

9homie
05-14-2008, 08:02 PM
The image should be there, it is there when i open it NOT on the internet, but it doesn't work when it IS on the web...

jcdevelopment
05-14-2008, 08:08 PM
have you uploaded the image into the folder where the html file is. Is it in the root folder?

9homie
05-14-2008, 08:09 PM
Yes...

jcdevelopment
05-14-2008, 08:16 PM
copy and paste what i uploaded and over write your whole html and see what happens.

9homie
05-14-2008, 08:21 PM
Nope. Doesn't work...

jcdevelopment
05-14-2008, 08:27 PM
the only thing i can think of is that its not in the right folder... lets do some error checking

go into your html <body>
and right above any content do this


<img src="background2.png" />

so it will look like this


<body bgcolor="#740000">

<img src="background2.png" />
<div id="wrapper">

<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>

let me know when its up

9homie
05-14-2008, 08:48 PM
No, that doesn't work, because it makes another image and so 2 of the big backgrounds are now there, all the writing is on the bottom one.

jcdevelopment
05-14-2008, 08:49 PM
no, i need you to put that up so i can look at something, just post that code in your html, i know it will mess things up, but i need to trouble shoot something.

9homie
05-14-2008, 09:30 PM
Done that now :D Look at troubleshoot away :D

jcdevelopment
05-14-2008, 09:42 PM
ok, just as i thought. i't cant find the picture. Which means its the wrong path to the image. You need to find out where that image is on the server. Look to see if its in the same folder or in a different one.

Look at the web page, see the big red "X".. right click on it and go down to "properties" Then see where its looking for it.

9homie
05-14-2008, 09:50 PM
I can't, i use a MAC... How do i find out?

jcdevelopment
05-14-2008, 09:52 PM
Well let me ask you, what are you using to upload your html and all of that great stuff? Which ftp program?

9homie
05-14-2008, 09:54 PM
Smultron

That is for mac by the way... SOON, i will have Dreamweaver

jcdevelopment
05-14-2008, 09:57 PM
ok, so you did upload the picture in the same folder as the html file?

9homie
05-14-2008, 09:58 PM
Yes i did.

jcdevelopment
05-14-2008, 10:05 PM
That doesnt make sense... ok try this, create a folder loacaly and lets call it

gfx

Then place the image

background2.png

upload it.

now go into the html and change


<img src="background2.png" />


to


<img src="gfx/background2.png" />


Then upload the html file.

EDIT* Just noticed its my 1,000 post, yeah me!!!

9homie
05-15-2008, 08:17 AM
Nope, I did it and it comes up with the same question box thing...

karlmeh
05-15-2008, 10:33 AM
Hi

well for this i 'll suggest you to use dreamweaver or edit plus.....

well this is my first post so......i just join this forum

thanks
Karl Meh

jcdevelopment
05-15-2008, 04:09 PM
Ok, so we know for a fact that the main problem is that the image is not coming up at all. So thats a starting point. We need to figure out why the path is broken or why the image is not uploading to your server.

If you trust me enough, and its fine if you dont, but Personal Message me your username and password to your ftp and i can take a look. Otherwise we can find another way. I understand now a days people cant trust anyone on the web but thats the only thing i can think of right now.. then you can change ur pswd to something else if you want.

9homie
05-15-2008, 05:27 PM
Sorry, i can't trust you.
So yes, we know that the image won't work, but it is a png, so it SHOULD work as a background. But it doesn't, so how do we make it work...

I have saved it into that folder you said and it still has the question mark box.
So What should we do now?

jcdevelopment
05-15-2008, 05:56 PM
ok, go into the editor where you made the image and save it as a gif instead of a .png

(dont worry i dont trust me either)

9homie
05-15-2008, 07:04 PM
No. Gif and PNG don't work...

jcdevelopment
05-15-2008, 07:25 PM
Ok, i dont know whats going on, put that img src tag back into the body again with the .gif as the background.

9homie
05-15-2008, 07:38 PM
I did and it didn't even work on the preview...

jcdevelopment
05-15-2008, 07:41 PM
Im not seeing it in the code, did you upload it? Im not sure what its doing just put it in the body section again and i will look at it. I have an idea.

9homie
05-15-2008, 08:13 PM
Uploaded it now...
Tell me what you think is wrong :D

jcdevelopment
05-15-2008, 08:26 PM
i have no other solutions, the image is not on the server. put this in that img src so you can see that it does work


http://i246.photobucket.com/albums/gg86/jcdevelopment/miller.jpg

so it will look like this


<img src="http://i246.photobucket.com/albums/gg86/jcdevelopment/miller.jpg">

That way u see that the code is right and that the image path is no good or the image is not on the server.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum