8 Replies - 770 Views - Last Post: 21 November 2010 - 10:26 PM

#1 XjCrazy09  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 24-November 09

Website within a Picture

Posted 20 November 2010 - 07:27 PM

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

Is This A Good Question/Topic? 0
  • +

Replies To: Website within a Picture

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Website within a Picture

Posted 20 November 2010 - 07:31 PM

Id 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).
Was This Post Helpful? 0
  • +
  • -

#3 XjCrazy09  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 24-November 09

Re: Website within a Picture

Posted 20 November 2010 - 07:38 PM

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.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Website within a Picture

Posted 20 November 2010 - 07:40 PM

it depends on how it should look. as I have no clear image of your design, my answer is somewhat vague (but thats how I would attempt it).
Was This Post Helpful? 0
  • +
  • -

#5 XjCrazy09  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 24-November 09

Re: Website within a Picture

Posted 20 November 2010 - 08:18 PM

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

Posted Image
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.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Website within a Picture

Posted 21 November 2010 - 03:48 AM

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

Was This Post Helpful? 0
  • +
  • -

#7 XjCrazy09  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 24-November 09

Re: Website within a Picture

Posted 21 November 2010 - 10:47 AM

Alright that's a good start. Thanks for the help!
Was This Post Helpful? 0
  • +
  • -

#8 XjCrazy09  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 24-November 09

Re: Website within a Picture

Posted 21 November 2010 - 02:20 PM

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.
Was This Post Helpful? 0
  • +
  • -

#9 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1383
  • View blog
  • Posts: 3,514
  • Joined: 28-November 09

Re: Website within a Picture

Posted 21 November 2010 - 10:26 PM

Stock Images.

Google it.

NEVER use images you get off an image search, it's an infringement hotbead waiting to break loose.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1