How to add a frame to your website’s content


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>
    <link rel="stylesheet" href="style.css">
    <div id="game">
    <iframe src="/game/embedded/index.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.

    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;
    height: 720px;
    width: 480px;
    position: relative;
    margin: 60px 0px 0px 20px;
    border: none;
    background: #000000;

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





Commercial free frames you can use:


451 x 882


433 x 770


514 x 869

Leave a Reply

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