html5 background [Archive] - Dynamic Drive Forums

NitroDev

11-02-2013, 04:02 PM

Indeed i want a background but it just doesn't seem to work well, here's the code:

<!doctype html>
<html>
<body style="background-image:url(MyCore.png)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> </title>

<script>
function credit()
{
document.body.innerHTML+="<pre><h3>These people helped me alot:<\/h3><br><br><a href='http://www.dynamicdrive.com/forums/'>Dynamic Drive<\/a><\/pre>"
}
function craft()
{
document.body.innerHTML="<pre><p>What do you want to craft?<\/p><button onClick='newWorld()'>Back<\/button><\/pre>"
}
function explore()
{
document.body.innerHTML="<pre><h1>Where do you want to explore?<\/h1><button onClick='newWorld()'>Back<\/button><br><button onClick='exploreNorth()'>North<\/button><\/pre>"
}

<!--Below are the explore() functions
function exploreNorth()
{
var found='a branch'
document.body.innerHTML="<pre><h4>You walk towards north and find "+found+"<\/h4><br><button onClick='explore()'>Back<\/button><\/pre>"
}
function myInventory1()
{
document.body.innerHTML="<pre>You came from first inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}

function myInventory2()
{
document.body.innerHTML="<pre>You came from second inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}

function myInventory3()
{
document.body.innerHTML="<pre>You came from third inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}

function showInventory()
{
document.getElementById('inventory').style.display='block';
document.getElementById('hide_list').style.display='inline'
}

function hideInventory()
{
document.getElementById('inventory').style.display='none';
document.getElementById('hide_list').style.display='none'
}

function newWorld()
{
document.body.innerHTML="<pre><h1>Hello and welcome to World of My Core!<\/h1>What would you like to do?<br><button style='width:145px' onClick='window.location.reload()'>Exit<\/button><br><button onClick='showInventory()' style='display: inline; width: 145px'>Show Inventory Items<\/button> <button id='hide_list' style='display: none' onclick='hideInventory()'>Hide Inventory<\/button><ul id='inventory' style='margin-top: 10px; margin-bottom: 0px; display: none'><li onclick='myInventory1()'>first item<\/li><li onclick='myInventory2()'>second item<\/li><li onclick='myInventory3()'>third item<\/li><\/ul><br><button onClick='craft()' style='width:145px'>Craft<\/button><br><button onClick='explore()' style='width:145px'>Explore<\/button><\/pre>"
}
function charCreate()
{
document.body.innerHTML="<pre><h3>Start by choosing your name!<\/h3><br><br><input type='text' name='name'><br><br><input type='radio' name='gender' value='Male'>Male<br><input type='radio' name='gender' value='Female'>Female<br><br><button onClick='newWorld()'>New World<\/button><pre>"
}
</script>

<style>
pre{font-family: verdana; font-size: 12px}
button {font-family: arial; font-size: 13px}
button,li{cursor: pointer}
</style>
</head>

<h1 style="color:brown">Welcome to My Core</h1>

<button onClick="charCreate()">Play</button><br>
<button onClick="credit()">Credits</button>

</body>
</html>
</body>
</html>

I really need this

mlegg

11-02-2013, 04:27 PM

Indeed i want a background but it just doesn't seem to work well, here's the code:

[CODE]<!doctype html>
<html>
<body style=background-image:url("MyCore.png")>
<head>

do it like that ^
you put the " around the image code

you could also add it to the css style sheet

#mybody {
background: url('images/MyCore.png') repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

then in the HTML code you link to the css stylesheet, make sure the stylesheet link to the .css file is in the <head>:

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

jscheuer1

11-02-2013, 04:40 PM

That really shouldn't make a difference. More likely the problem is that MyCore.png is a 404 not Found. And/or that the body tag is before the head and possibly being ignored. The body tag should start after the head has been closed.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

NitroDev

11-02-2013, 07:30 PM

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

And how do i do that?

molendijk

11-02-2013, 11:19 PM

You could do something like this:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> </title>

<script>
function credit()
{
document.body.innerHTML+="<pre><h3>These people helped me alot:<\/h3><br><br><a href='http://www.dynamicdrive.com/forums/'>Dynamic Drive<\/a><\/pre>"
}
function craft()
{
document.body.innerHTML="<pre><p>What do you want to craft?<\/p><button onClick='newWorld()'>Back<\/button><\/pre>"
}
function explore()
{
document.body.innerHTML="<pre><h1>Where do you want to explore?<\/h1><button onClick='newWorld()'>Back<\/button><br><button onClick='exploreNorth()'>North<\/button><\/pre>"
}


function exploreNorth()
{
var found='a branch'
document.body.innerHTML="<pre><h4>You walk towards north and find "+found+"<\/h4><br><button onClick='explore()'>Back<\/button><\/pre>"
}
function myInventory1()
{
document.body.innerHTML="<pre>You came from first inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}

function myInventory2()
{
document.body.innerHTML="<pre>You came from second inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}

function myInventory3()
{
document.body.innerHTML="<pre>You came from third inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}

function showInventory()
{
document.getElementById('inventory').style.display='block';
document.getElementById('hide_list').style.display='inline'
}

function hideInventory()
{
document.getElementById('inventory').style.display='none';
document.getElementById('hide_list').style.display='none'
}

function newWorld()
{
document.body.innerHTML="<pre><h1>Hello and welcome to World of My Core!<\/h1>What would you like to do?<br><button style='width:145px' onClick='window.location.reload()'>Exit<\/button><br><button onClick='showInventory()' style='display: inline; width: 145px'>Show Inventory Items<\/button> <button id='hide_list' style='display: none' onclick='hideInventory()'>Hide Inventory<\/button><ul id='inventory' style='margin-top: 10px; margin-bottom: 0px; display: none'><li onclick='myInventory1()'>first item<\/li><li onclick='myInventory2()'>second item<\/li><li onclick='myInventory3()'>third item<\/li><\/ul><br><button onClick='craft()' style='width:145px'>Craft<\/button><br><button onClick='explore()' style='width:145px'>Explore<\/button><\/pre>"
}
function charCreate()
{
document.body.innerHTML="<pre><h3>Start by choosing your name!<\/h3><br><br><input type='text' name='name'><br><br><input type='radio' name='gender' value='Male'>Male<br><input type='radio' name='gender' value='Female'>Female<br><br><button onClick='newWorld()'>New World<\/button><pre>"
}
</script>

<style>
pre{font-family: verdana; font-size: 12px}
button {font-family: arial; font-size: 13px}
button,li{cursor: pointer}

</style>
</head>

<body style="background-image:url(http://1.bp.blogspot.com/-_5gUFXhtWzs/UL3OodnbLuI/AAAAAAAAIe0/-vlMJdaUDvo/s1600/winter-landschap-met-een-laag-sneeuw.jpg); background-size: 100%; background-repeat:no-repeat; background-position: absolute; ">

<h1 style="color:brown">Welcome to My Core</h1>

<button onClick="charCreate()">Play</button><br>
<button onClick="credit()">Credits</button>

</body>
</html>

jscheuer1

11-03-2013, 01:41 AM

And how do i do that?

To post a link to your page. Put it up on the web and give us the address.

NitroDev

11-03-2013, 03:33 PM

So like to my own site? i really dont have one