-2

I'm looking to position an image on top of another image about 10 pixels from the bottom of the image. The issue is that if I follow methods like below when the web browser is scaled the top image moves all over the place. The bottom image is relative and the top image is absolutely positioned if anyone doesn't want to open the link.

CSS-Tricks text-blocks-over-image

AntBirch
  • 272
  • 4
  • 20
  • Please show us the exact code you are using. – Robert Jul 01 '16 at 20:35
  • Are you putting both images in the same container? (div) Provide the code if you want further help... – Jason Fetterly Jul 01 '16 at 20:35
  • Yes both images are in the same container. Will put together the code in JSfiddle shortly. – AntBirch Jul 01 '16 at 20:36
  • I'm going through the code bit by bit now and it seems my issue is that my bottom main image is set to be 100% width and if I remove this the top image stays in the correct position. Going to finish putting code in JSfiddle and hopefully find a way to set the image to full width. – AntBirch Jul 01 '16 at 20:50
  • Remember, if you don't set the size of the main div tag, it will grow to accommodate the widest element within it... which is probably why your bottom image is affecting the top one. – Jason Fetterly Jul 01 '16 at 20:59
  • If I don't set a size in the main div the bottom image displays at the size of the image which is 1200px wide but what I want is for the image to fill the width of the screen which in this case is larger. – AntBirch Jul 01 '16 at 21:04
  • Maybe this will help http://hitbits.net/2015/07/10/stretching-an-image-horizontally-accross-the-entire-screen-with-css/ – Jason Fetterly Jul 01 '16 at 21:13
  • Doesn't seem to help with my issue. Here is example code: https://jsfiddle.net/u4cap66r/#&togetherjs=B0n1Qx5JHp – AntBirch Jul 01 '16 at 21:25

2 Answers2

0

Though your fiddle seems to be using the same image twice, I think I've made the adjustments you need to get your answer. You had the the same styling applied to both images inside of the image-container... adding a couple classes resolved this (or you could use psuedo-selectors).

In the future, I'd recommend putting the code for your question directly into the question as it will help the community help you. If you can, maybe go back and put your original code into this question, it will help those who stumble on this question/answer in the future.

HTML:

<div>
  <div class="image-container">
    <img class="firstimg" src="http://lorempixel.com/1000/500">
    <a class="social-image" href="https://www.instagram.com">
          <img class="secondimg" src="http://lorempixel.com/1000/500">
        </a>
  </div>
</div>

CSS:

.image-container {
    position: relative;
}

.image-container .firstimg {
    width: 100%;
}

.social-image img {
    position: absolute;
    /* left: 3em; */
    top: 70px;
    width: 100%;
    z-index:9999;
}
dougblitz210
  • 139
  • 2
  • 9
0

Ah, think I have a better understanding of the question now... what about using a percentage for both the left and top attributes? That seems to keep spacing consistent when the browser is scaled.

HTML:

<div>
  <div class="image-container">
    <img src="http://lorempixel.com/1000/500">

    <a class="social-image" href="https://www.instagram.com">
      <img src="http://lorempixel.com/1000/500">
    </a>
  </div>
</div>

CSS:

.image-container {
    position: relative;
}

.image-container img {
    width: 100%;
}

.social-image {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 100%;
}
dougblitz210
  • 139
  • 2
  • 9
  • No luck. This does the exact same thing. I think need a way of making the top image also respond to the browser height/width as otherwise it just stays put. – AntBirch Jul 02 '16 at 11:59