[XjCrazy09]

Hello DIC Website development community,
I have begun my process to learning more about web development over the weekend. However, I was wanting to create a website that displays an image as a frame and then has the page within the image. For example, I would like to create a frame that looks like a desktop monitor and then within the monitor I could show the website. Since I am a noob, I was hoping just to get some ideas of the best way to accomplish this.

Thanks in advance,
XjCrazy09

[Dormilich]

I’d suggest that you use a <div> (which can have appropriate margin) holding all the content, putting the image as its background (CSS – background-image, background-position: fixed).

[XjCrazy09]

Alright, since I am new to web development I am going to confirm I understand this the correct way.

Use the CSS to set the image as a fixed position. and then using the <div> to set the appropriate width and height for the main page.

[Dormilich]

it depends on how it should look. as I have no clear image of your design, my answer is somewhat vague (but that’s how I would attempt it).

[XjCrazy09]

Yeah this is really hard to explain. Let me show you from some random images off the web.


This would be like the frame or the background image I would use. Then inside of it I would display my html file within the boundaries of the monitor.

Random Idea.

[Dormilich]

something that is working:

body {
	background-image: url("path/to/image");
}
/* put in the correct sizes */
#monitor {
	position: relative;
	top: 100px;
	left: 200 px;
	width: 500px;
	height: 300px;
	overflow: auto;
}

tested: FF 3.6, Safari 5, Chrome, Opera 10, IE 7/8 (wine)

there are still some more possibilities to position the image/elements.

This post has been edited by Dormilich: 21 November 2010 - 03:49 AM

[XjCrazy09]

Alright that's a good start. Thanks for the help!

[XjCrazy09]

I know this isn't exactly a coding question, but is there any type of copyright infringement or anything illegal in using an image such as this to display code inside? I mean, if I take the name off the image but it is still a recognizable product? Just don't want to step on any toes.

[Lemur]

Stock Images.

Google it.

NEVER use images you get off an image search, it's an infringement hotbead waiting to break loose.