CODEWITHSUNDEEP
htmlcss
Abbas Galiyakotwala
Abbas Galiyakotwala

Reputation: 3019

Responsive div inside responsive image

i want Responsive div inside responsive image as below enter image description here

any help would be appreciated. i am not good at css:(

Upvotes: 1

Views: 657

Answers (2)

Timothy
Timothy

Reputation: 1158

If someone wants to do this without it been responsive it can be done like this.

Make the screen a background image and then use a relative positioned iframe. i added a YouTube iframe to the screen in the demo.

Demo

        .outer {
    background-image: url('http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png');
    width:800px;
    height:596px;
}
.inner {
    position: relative;
    background-color:;
    left: 120px;
    top: 68px;
    width:550px;
    height:405px;
}

............ 

<div class="outer"><iframe class="inner"></iframe>

you could even use a 2 or 3px border-radius to match the image.

Upvotes: 2

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://jsfiddle.net/ey9ykhwd/3/

use percentage for placing the content div parent should be positioned relative

.content {
    position: absolute;
    width: 68.7%;
    height: 67.6%;
    background: Red;
    left: 15%;
    top: 11%;
}


.cont {
  position: relative;
}
img {
  width: 100%;
}
.content {
  position: absolute;
  width: 68.7%;
  height: 67.6%;
  background: Red;
  left: 15%;
  top: 11%;
}
}
<div class="cont">
  <img src="http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png" />
  <div class="content">content here</div>
</div>

Upvotes: 0

Related Questions