Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 56
  1. #1
    Banned
    Join Date
    May 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Background Image

    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

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    #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?
    Last edited by jcdevelopment; 05-13-2008 at 08:06 PM. Reason: missed #

  • #3
    Banned
    Join Date
    May 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Banned
    Join Date
    May 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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(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.
    Last edited by 9homie; 05-13-2008 at 08:13 PM.

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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!

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    <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

  • #7
    Banned
    Join Date
    May 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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:

    Code:
    wrapper {
    background-image:url('background4.png');
    background-repeat:repeat;
    width:800px;
    margin:0 auto;
    }
    Is that right? Should it work?

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    #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

  • #9
    Banned
    Join Date
    May 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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...

  • #10
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    #wrapper {
    background-image:url('background4.png');
    background-repeat:repeat;
    width:800px;
    }

  • #11
    Banned
    Join Date
    May 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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?

    Code:
    <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?

  • #12
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    just make the body red!

  • #13
    Banned
    Join Date
    May 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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?

  • #14
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well it depends you could do this

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

  • #15
    Banned
    Join Date
    May 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Nope, that doesn't work for me....


  •  
    Page 1 of 4 123 ... LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •