Page 1 of 1

hOW TO change background to a image

Posted: Sun Apr 10, 2011 10:04 am
by vitinho444
Hey guys, i want to make my game more pretty, how can i add a image to the background of all pages?

Re: hOW TO change background to a image

Posted: Sun Apr 10, 2011 3:19 pm
by rockinliam

Code: Select all

body{
        background-image:url('image.jpg');
}

Re: hOW TO change background to a image

Posted: Mon Apr 11, 2011 12:20 pm
by vitinho444
i put that where?

Re: hOW TO change background to a image

Posted: Mon Apr 11, 2011 1:21 pm
by PaxBritannia
Just in case you haven't realised, the snippet of code Vitinho444 gave you is CSS, so you'll probably want to put in in a CSS file.

Since you want it to appear in every page, I suggest linking to the CSS file from your connect.php, assuming you include connect.php in every page.

That should clear things up a bit. If you want me to clarify more, just ask. :)

pax.

Re: hOW TO change background to a image

Posted: Mon Apr 11, 2011 2:20 pm
by vitinho444
well, so i just need to add that to style.css?

then i need to make a include(style.css)?

If i make a background.css
then in there post that code.

How can i connect the css to Connect.php to open in every pages?

Re: hOW TO change background to a image

Posted: Mon Apr 11, 2011 4:08 pm
by ConceptDestiny
Add the following into the head of your index file:

Code: Select all

<link href="style.css" rel="stylesheet" type="text/css">
And inside your stylesheet file (style.css) add:

Code: Select all

body{
        background-image:url('image.jpg');
}

Re: hOW TO change background to a image

Posted: Mon Apr 11, 2011 11:03 pm
by ConceptDestiny
Short addendum to my last response:

You can also expand the background image properties to define the location on the page, for example:

Code: Select all

body{
        background-image:url('image.jpg'); background-position: center top; background-repeat: no-repeat;
}
background-position can be defined by either X,Y coordinates (eg. background-position: 45px -12px;) or by position indicators (eg. background-position: center top; <-- this obviously positions the image at the center of the page, at the very top.)

background-repeat simply indicates whether or not you want the background to repeat (eg. a tile background effect).

Hope this helps. :)

Re: hOW TO change background to a image

Posted: Mon Apr 11, 2011 11:11 pm
by vitinho444
Image

my style.css:

Code: Select all

body{background-image:url('background.png');
}

#login {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:150px;
	z-index:1;
background-color: #7F5000;
 
}
#login2 {
	position:absolute;
	left:0px;
	top:200px;
	width:800px;
	height:150px;
	z-index:1;

 
}
#player {
	position:absolute;
	left:400px;
	top:200px;
	width:450px;
	height:450px;
	z-index:3;


}
#creature {
	position:absolute;
	left:400px;
	top:400px;
	width:450px;
	height:650px;
	z-index:3;


}
#logout {
	position:absolute;
	left:10px;
	top:10px;
	width:150px;
	height:150px;
	z-index:3;


}
#locations {
	position:absolute;
	left:400px;
	top:100px;
	width:450px;
	height:450px;
	z-index:3;


}
#gold {
	position:absolute;
	left:200px;
	top:200px;
	width:150px;
	height:100px;
	z-index:3;


}
#lpanel {
	position:absolute;
	left:10px;
	top:100px;
	width:100px;
	height:200px;
	z-index:3;


}
#hpointsback {
	position:absolute;
	left:10px;
	top:204px;
	width:100px;
	height:15px;
	z-index:1;

}
#hpoints {
	position:absolute;
	left:10px;
	top:204px;
	width:100px;
	height:15px;
	z-index:2;
	text-align:left;

}
#spointsback {
	position:absolute;
	left:10px;
	top:225px;
	width:100px;
	height:15px;
	z-index:1;

}
#spoints {
	position:absolute;
	left:10px;
	top:225px;
	width:100px;
	height:15px;
	z-index:2;
	text-align:left;
}
#table {
	position:absolute;
	left:200px;
	top:105px;
	width:500px;
	height:900px;
	z-index:2;
}
#magic {
	position:absolute;
	left:400px;
	top:100px;
	width:450px;
	height:450px;
	z-index:3;
}
my index.php:

Code: Select all

<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css"><?php include ("style.php") ?></style><center><title>
The Legend of Kanisys
</title>
<?php
include_once 'connect.php';
session_start();
$bypass = 0;
include_once 'logo.php';
?>
 <link href="style.css" rel="stylesheet" type="text/css" />
<div id="login2" div align="center">


<?php
if (isset($_SESSION['player']))
{
  $player=$_SESSION['player'];
}
else
{  echo "<h3>Welcome to The Legend of Kanisys</h3>";
  echo "<br><a href='login.php?bg=7F5000'><img src='images/login.gif'></a><br>";
  echo "<br><a href='register.php?bg=7F5000'><img src='images/register.gif'></a><br>";
  //echo "<br><a href='lostpassword.php'><img src='images/lost.gif'></a><br>";  echo "<br><a href='story.php?bg=7F5000'><img src='images/story.gif'></a><br>";  
  echo "<br><br><br><h2>Please Support our Website:</h2>";
  echo "<br><a href='http://2dfe5686.linkbucks.com'><h2>Support our Website for Free</a><br></h2>"; 
  echo "<br><a href='http://www.linkbucks.com/referral/226894'><img src='http://www.linkbucks.com/tmpl/mint/img/468_60link_bucks.gif'></a><br>"; 
  echo "<br><a href='http://adf.ly/15AfB'><img src='http://adf.ly/images/banners/adfly.728x90.1.gif'></a>";

 exit;
}
?>
</div>

<?php
$playerinfo="SELECT * from players where name='$player'";
$playerinfo2=mysql_query($playerinfo) or die("could not get player stats!");
$playerinfo3=mysql_fetch_array($playerinfo2);
include_once 'statpanel.php';
 ?>
 <div id ="locations">
 <?php
$bypass;
$playerhp = $playerinfo3['hpoints'];
if ($playerhp < 1)
{
  echo "You are dead!" ;
  echo "<br><a href='inn.php>Visit Doctor";
  exit;
}

if(isset($_GET['map']))
{
$bypass=1;
echo "<a href='index.php?mapchange=1&mapname=Kirmania'><img src='images/Kirmania.gif'></a><br><br>";
echo "<a href='index.php?mapchange=1&mapname=Zarton'><img src='images/Zarton.gif'></a><br><br>";
echo "<a href='index.php?mapchange=1&mapname=Brigan'><img src='images/Brigan.gif'></a><br><br>";
echo "<a href='index.php?mapchange=1&mapname=NewState'><img src='images/NewState.gif'></a><br><br>";

echo "<br><a href='index.php'>Never Mind</a><br>";
}

if(isset($_GET['mapchange']))
{
$bypass = 1;
$mapname = $_GET['mapname'];

$updateplayer="update players set location='$mapname' where name='$playerinfo3[name]'";
  mysql_query($updateplayer) or die("Could not update player");
  
echo "You have traveled to " . $mapname . ".<br>";
echo "<a href='index.php'>To location</a><br>";
}

if($bypass != 1)
{
echo "You are in ";
echo "<b><big><u>" . $playerinfo3['location'] . "</u></big></b><br>";echo "<br><br><a href='equipment.php'><img src='images/bag.gif'></a><br>";
echo "<br><a href='store.php'><img src='images/store.gif'></a><br>";
echo "<br><a href='weaponshop.php'><img src='images/weaponshop.gif'></a><br>";
echo "<br><a href='armorshop.php'><img src='images/armorshop.gif'></a><br>";
echo "<br><a href='inn.php'><img src='images/doctor.gif'></a><br>";
echo "<br><a href='spelltrainer.php'><img src='images/spelltrainer.gif'></a><br>";
echo "<br><a href='battle.php'><img src='images/battlemonster.gif'></a><br>";

//LOAN
// echo "<a href='loan.php'>Loan Money</a><br>";
///////LOAN

//WORKING:
// echo "<a href='work.php'>Work at Farm</a><br>";
//WORKING:
echo "<br><a href='index.php?map=1'><img src='images/travel.gif'></a><br>";
echo "<br><br><br><a href='rank.php'><img src='images/rank.gif'></a><br>";$admin = $playerinfo3['admin'];if ($admin == 1){echo "<br><br><br><a href='admin.php'><img src='images/admin.gif'></a><br>";}
}


 ?>
 </div>
<div id="logout">
<?php
echo "<br><a href='logout.php?bg=7F5000'><img src='images/logout.gif'></a>";
?>
</div>
</center>
whats wrong?

Re: hOW TO change background to a image

Posted: Mon Apr 11, 2011 11:17 pm
by ConceptDestiny
<style type="text/css"><?php include ("style.php") ?></style><center><title>
What's style.php?

You should include a semi-colon at the end of your include, btw. i.e:

Code: Select all

<?php include ("style.php"); ?> 

Re: hOW TO change background to a image

Posted: Tue Apr 12, 2011 8:00 am
by vitinho444
style.php is a file that i created to all pages of the game has a background color by adding ?bg=COLORCODE to the page.

i put the semi colon there but is the same...