CODEWITHSUNDEEP
htmlcssimage
Thomas Hutton
Thomas Hutton

Reputation: 803

Can't Put Image Over Image

Edit: The solutions HAVE to have display: inline-block;

I'm trying to put an iframe over an image. However, no matter what I set the margin-right to, it stays in the same spot. About 1/5 of the background image.

HTML

<div class="backgroundimage">
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.backgroundimage {
  display: inline-block;
  position: relative;
  top: 70px;
  bottom: 46px;
}
.Youtube {
  position: absolute;
  left: 280px;
  bottom: 46px;
  right: 380px;
}

And a picture of my issue:

issue

Upvotes: 4

Views: 219

Answers (8)

norcal johnny
norcal johnny

Reputation: 2115

I know it's late..

How about a very nice lightweight way of keeping it responsive by percentages? The resizing works flawlessly on all devices.

To add a width..add max-width:500px in the photo div, or whatever size you want, it will perfectly resize.

#container {
  display: inline-block;
  width: 100%;
  height: auto;
}

#photo {
  position: absolute;
  width: 100%;
}

#movie {
position: absolute;
    width: 100%;
    max-width: 90%;
    height: 75%;
    top: 6.75%;
    left: 4.25%;
    border: none;
}
<div id="container">
  <div id="photo">
    <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" width="100%" height="auto">
    <div id="movie">
       <iframe class="Youtube" width="100%" height="100%" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen>    </iframe>
    </div>
  </div>
</div>

JsFiddle demo

Upvotes: 0

Dhaval Ajani
Dhaval Ajani

Reputation: 177

HTML

<div class="backgroundimage">
 <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
  </div>

CSS

  .backgroundimage {
      display: inline-block;
      position: relative;
      top: 70px;
      bottom: 46px;
    }
    .Youtube {
      position: absolute;
      left: 10px;
      bottom: 52px;
    }

Fiddel

https://jsfiddle.net/dhavalpatel/a2bhnw92/

Upvotes: 0

Steven Ventimiglia
Steven Ventimiglia

Reputation: 905

Adjusted the absolute position of the video.

http://codepen.io/anon/pen/BLOdov

.backgroundimage {
  display: inline-block;
  position: relative;
  top: 70px;
  bottom: 46px;
}
.Youtube {
  position: absolute;
  left: 12px;
  bottom: 50px;
  right: 380px;
}

Upvotes: 0

darrylyeo
darrylyeo

Reputation: 3473

You'll never need to set both left and right when the width of an element is known. Just one of the two will suffice.

.backgroundimage {
    display: inline-block;
    position: relative;
    top: 70px;
    bottom: 46px;
}
.Youtube {
    position: absolute; 
    top: 22px;
    left: 20px;
}

Upvotes: 0

Johannes
Johannes

Reputation: 67798

Just change left to a smaller value in the .Youtube rule (that's left of the parent elements left side). Start at about 10px and find the ideal position by trying.

ADDITION: You also have to erase the right: 380px; from your .Youtube rule - it overwrites the left rule (since it follows below it ("cascading")).

Upvotes: 5

Chris Lear
Chris Lear

Reputation: 6742

This is as similar as I can make to your code, while showing the image over the iframe:

img {
    position:absolute;
  left: 280px;
}

.backgroundimage {
  display: inline-block;
  position: relative;
  top: 70px;
  bottom: 46px;
}
.Youtube {
  position: absolute;
  left: 280px;
}

<div class="backgroundimage">
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
</div>

The main thing I've done is added position:absolute to the image

Upvotes: 0

Razia sultana
Razia sultana

Reputation: 2221

<style type="text/css"> 
.container { position:relative; }
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; } 
</style>

<div class="container">
<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">
</div>

If you want you can add more image.

Upvotes: 0

kind user
kind user

Reputation: 41913

It's all about the positioning. Just changed the margins and paddings.

.backgroundimage {
  position: relative;
}
.Youtube {
  position: absolute;
  top: 11px;
  left: 11px;
}
<div class="backgroundimage">
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
</div>

Upvotes: 0

Related Questions