Advanced Search

Results 1 to 7 of 7

Thread: html5 background

  1. #1
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Unhappy html5 background

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>&nbsp;</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>&nbsp;<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

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Default

    Quote Originally Posted by NitroDev View Post
    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
    Code:
    #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>:
    HTML Code:
    <head>
    <link rel="stylesheet" type="text/css" href="theme.css">
    </head>
    Last edited by mlegg; 11-02-2013 at 04:38 PM. Reason: css

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,674
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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?

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    You could do something like this:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>&nbsp;</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>&nbsp;<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>

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,674
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by NitroDev View Post
    And how do i do that?
    To post a link to your page. Put it up on the web and give us the address.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

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

Similar Threads

  1. UTF-8 with HTML5
    By techno_race in forum Coding tips & tutorials threads
    Replies: 16
    Last Post: 06-23-2012, 06:03 PM
  2. HTML5 background audio player
    By oldmanInAz in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-07-2012, 08:28 PM
  3. HTML5 background audio player not working in Firefox
    By xotj123 in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 06-07-2012, 06:32 AM
  4. Creating multiple instances of the HTML5 background audio player
    By solaningo in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-17-2012, 12:15 AM
  5. HTML5 help
    By john123a in forum HTML
    Replies: 3
    Last Post: 06-30-2011, 12:42 AM

Bookmarks

Posting Permissions

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