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.
- 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.
- 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.
- 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.
<link rel="stylesheet" href="style.css">
- 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)");
margin: 60px 0px 0px 20px;
In the end this is how the folder which will host the frame will look like: