CODEWITHSUNDEEP
htmlcss
Organiccat
Organiccat

Reputation: 5651

Floating image over same location as background image responsively

I have an dynamic div displaying some information that I want to position in an exact position relative to the background of the page. For example, I want to put a number 9 let's say, over the eye of a cat. In "full" resolution, this works fine, but tying the margin-left to a pixel size, or even a percent, will cause this to break. The code for the "eye" is something like this:

.catEye {
  position: absolute;
  color: #DCDCDC;
  font-size: 10px;
  font-weight: bold;
  font-family: "helvetica-neue-bold", helvetica, sans-serif;
  width: 25px;
  height: 25px;
  margin-top: 100px;
  margin-left: 68px;
  border: 3px solid #000000;
  border-radius: 100%;
  background-color: #000000;
}

Here is a plunkr that displays the problem. The problem is most evident at smaller resolutions. When in "full" resolution, the "9" should be directly over the cat eye.

http://plnkr.co/edit/2uqIhBseRLo5A47JVI2F?p=preview

I am using Foundation for the block-grid setup, 5 items per row. As the image I have is a certain size, this should generally remain the same if possible.

Question: Is there a way to get the "9" to always position directly over the eye, no matter the browser resolution? In my actual work, it needs to be positioned directly over a corner piece, so movement is very noticeable.

Clarification: After thinking about it, what I'm basically asking is positioning relative to the image element, because no matter the size/placement of it, as long as the "9" is placed relative to it, it would work.

Upvotes: 0

Views: 597

Answers (3)

ZADorkMan
ZADorkMan

Reputation: 431

.wrapper {
    background-image: url('https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg');
    height: 500px;
    background-size:cover;
}
.overlay {
  opacity: .5;
}
.logo {
 position: relative;
 top: 35%;
 left: 35%;
 z-index:9999;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-6 d-flex justify-content-center flex-column">
      <h3>Title here</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu tortor eget sem elementum malesuada. Sed ac arcu nec magna facilisis aliquet. Sed ac pellentesque tortor. Quisque consequat dolor non iaculis molestie.</p>
    
    </div>
    <div class="col-6 wrapper">
      
      <img src="https://www.bluecapcoffee.com/wp-content/uploads/2023/06/Lavazza.png" class="logo" width="30%" height:"auto">
    </div>
  </div>
</div>

Notice the imgs width and the left and top %

Upvotes: 0

Stickers
Stickers

Reputation: 78686

I guess you meant to have sort of background-size:cover for the cat, I don't think that is possible in that case.

Currently, the relative position is set on the element that can be larger than 200px (which is the image size), and you have center value set on the background, so that it moves. The cat eye is always staying in the same place but not the cat image.

To fix it, you can set the relative element to max-width: 200px;. Simplified demo follows.

JSFiddle Demo

.imgCat {
    background: url("http://i.imgur.com/qpbY8VC.png");
    max-width: 200px;
    height: 200px;
    position: relative;
}
.catEye {
    position: absolute;
    left: 75px;
    top: 95px;
    width: 30px;
    height: 30px;
    display: block;
    border: 2px solid orange;
    border-radius: 50%;
}
<div class="imgCat">
    <span class="catEye"></span>
</div>

Upvotes: 1

maioman
maioman

Reputation: 18754

First thing you can use left: and top: property to position an absolute/relative img (instead of margin-left & margin-top).

Second depending on how the containing img is resizing I'd set the left: and top: property with a percentage value.

Third use relative positioning (relative to static parent - like in your scenario).

put this in your CSS and let me know if it's the desired rendering

.imgCat {
   background: url('http://i.imgur.com/qpbY8VC.png') center no-repeat;
   height: 200px;
 }

 li {
   padding: 10px;
   border: 1px solid #000;

 }

 .catEye {
  position: relative;
  color: #DCDCDC;
  font-size: 10px;
  font-weight: bold;
  font-family: "helvetica-neue-bold", helvetica, sans-serif;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 35%;
  border: 3px solid #000000;
  border-radius: 100%;
  background-color: #000000;
}

BTW: actually the cat img doesn't look very responsive...

Upvotes: 1

Related Questions