How to display an image within another image [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
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 ?

Answer 1

Create a computer image say(500x500)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*/
}

Answer 2

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>

Answer 3

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 Test 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 Test 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 Test 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 Test 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>