How to add a frame to your website’s content

Embeding_Resized_01

Say you have a game…and you want it to be shown in a nice mobile phone frame to help the user notice the scale of…things.

  1. First thing’s first, you need a frame, and one the size of whatever content you want to put in. Preferably a vector since those can be resized without any loss of quality.
  2. You put the game in a different folder from the place where you want it to appear; that location will only have the index.html page and the style.css.

    index.html content

  3. For this example I will use the path /game/index.html where the game files are located; the content below is from the index.html, page located where you want the frame to appear, same location as with the second file – style.css.

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div id="game">
    <iframe src="/game/embedded/index.html">
    </div>
    </body>
    </html>

    style.css content

  4. The style.css will contain the tag #game so that the index.html will know what to apply at div id=”game”. Inside it will be the frame you wish to put as the background-image. The size of this must be big enough so that the content will be inside it without overlapping anything. In this example (the picture at the top) I needed the height to be 870px and the width 525px to fit the iframe(where the content will be shown) which had the height of 7 20px and width 480px.

    #game
    {
    background-image: url("http://www.your-website-here/border-location/border-name.extension(usually png is best)");
    background-repeat: no-repeat;
    height: 870px;
    width: 525px;
    margin-left:auto;
    margin-right:auto;
    position:inherit;
    }
    iframe
    {
    height: 720px;
    width: 480px;
    position: relative;
    margin: 60px 0px 0px 20px;
    border: none;
    }
    body
    {
    background: #000000;
    }

In the end this is how the folder which will host the frame will look like:

LocationWithFrame

 

 

 

Commercial free frames you can use:

451x882

451 x 882

Frame1[433x770]

433 x 770

Frame2[514x869]

514 x 869

Leave a Reply

Your email address will not be published. Required fields are marked *