Photoshop Question posted in
The official user guide can be found here.

How to display an image within another image – Photoshop

I’m trying achieve an effect in which the image I am displaying is displayed within a computer screen. So basically, there’ll be an image of a computer screen and my image within the screen.

What I am about to do is use photoshop to display the whole thing as a single image. But this is not really scalable. The other idea I had was to create CSS border images of the computer screen, however this sounds a bit involved, I am looking for a quick thing.

I know I’ve seen this effect on plenty of websites (but I can’t remember the name of any to check the source), and I really feel there might be a ready-to-use solution to achieve that. Does such a ready-to-use solution exists or can you think of a simple way to achieve that ?

Tags:

3

Answers


  1. 0

    This can be achieved by using CSS positioning methods. Here is an example you can use.

    JSbin Demo 

    .project-widget-container {
  position: relative;
  margin-bottom: 30px;
}
.project-widget-container section {
  position: relative;
  padding-top: 20px;
  margin-left: 10px;
}
.project-widget-container section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 20px;
  bottom: 0;
  border: 1px solid #eee;
  z-index: -1;
}
.project-widget-container section:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 20px;
  bottom: 0;
  box-shadow: -5px -5px 5px -5px #eee, 5px -5px 5px -5px #eee;
  z-index: -1;
}
.project-title {
  border-left: 2px solid #660061;
  padding-left: 20px;
}
.project-title h4 {
  color: #660061;
  font-weight: bold;
  font-size: 1.4em;
  line-height: 50px;
}
.project-excerpt {
  color: #666;
  font-size: 1.1em;
  padding: 20px 20px 0 20px;
  line-height: 1.2em;
  height: 60px;
}
img.imac {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
.project-image-container {
  position: relative;
  left: -10px;
  padding-top: 85%;
}
.thumb img {
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -25%;
}
.thumb {
  position: absolute;
  z-index: 1;
  bottom: 18%;
  left: 0;
  right: 0;
}
    <!DOCTYPE html>
<html>

<head>
  <script src="//code.jquery.com/jquery.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>


  <div class="container">
    <div class="row">


      <div class="col-sm-6 col-md-3 project-widget-container">
        <section>
          <div class="project-title">
            <h4>Project 1</h4>
          </div>
          <div class="project-excerpt">
            Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
          </div>
          <div class="project-image-container">
            <div class="thumb">
              <img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
            </div>
            <img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
          </div>
        </section>
      </div>
      <!-- col -->


      <div class="col-sm-6 col-md-3 project-widget-container">
        <section>
          <div class="project-title">
            <h4>Project 1</h4>
          </div>
          <div class="project-excerpt">
            Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
          </div>
          <div class="project-image-container">
            <div class="thumb">
              <img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
            </div>
            <img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
          </div>
        </section>
      </div>
      <!-- col -->

      <div class="clearfix visible-sm"></div>

      <div class="col-sm-6 col-md-3 project-widget-container">
        <section>
          <div class="project-title">
            <h4>Project 1</h4>
          </div>
          <div class="project-excerpt">
            Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
          </div>
          <div class="project-image-container">
            <div class="thumb">
              <img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
            </div>
            <img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
          </div>
        </section>
      </div>
      <!-- col -->

      <div class="col-sm-6 col-md-3 project-widget-container">
        <section>
          <div class="project-title">
            <h4>Project 1</h4>
          </div>
          <div class="project-excerpt">
            Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
          </div>
          <div class="project-image-container">
            <div class="thumb">
              <img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
            </div>
            <img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
          </div>
        </section>
      </div>
      <!-- col -->

      <div class="clearfix visible-sm"></div>

    </div>
    <!-- row -->
  </div>
  <!-- container -->
</body>

</html>
    Login or Signup to reply.
  2. 0

    Not sure if this I got you right, but here is a little demo of a MacBook Pro screen with a grumpy cat on it. Is this the kind of result you want to achieve? (EDIT: take a look for snippet #2 for the whole body (use the “full-page” view for a better result) )

    Screen only

    html * {
  box-sizing: border-box;
}
#content {
  background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
  background-size: contain;
  width: 100%;
  height: 100%;
}
#outer-frame {
  border: 4px solid #DADFE1;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  height: 350px;
  width: 600px;
}
#inner-frame {
  height: 100%;
  border: 20px solid #000;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}
    <div id="outer-frame">
  <div id="inner-frame">
    <div id="content"></div>
  </div>
</div>

    Screen + body

    html * {
    box-sizing: border-box;
}
.wrap{
    width: 100%;
    height: 100%;
}
#content {
    background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 100%;
}
#outer-frame {
    border: 4px solid #DADFE1;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    height: 350px;
    width: 600px;
    margin: 0 auto;
}
#inner-frame {
    height: 100%;
    border: 20px solid #000;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
}
#body{
    height: 20px;
    background: #DADFE1;
    width: 700px;
    margin: 0 auto;
    border-radius: 2px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}
#notch{
    height:10px;
    width: 100px;
    background: #BDC3C7;
    margin: 0 auto;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: inset 1px -1px 2px rgba(0,0,0,0.5);
}
    <div class="wrap">
  <div id="outer-frame">
    <div id="inner-frame">
      <div id="content"></div>
    </div>
  </div>
  <div id="body">
    <div id="notch"></div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Create a computer image say(500×500)px with its screen transparent(blank) and export it as png with transparency on.

    Then export you another image with same resolution.

    And then you css position to place them on each other.

    #computer_image{
    position:relative;
    z-index:100; /*To keep computer screen above use positive value*/
}
#computer_screen{
    position:relative;
    z-index:50;
    /*Use top/left/right/bottom to place image on computer screen*/
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search