Html Question posted in
Some basic documentation can be found here.

Html – Absolute positioning on cover image background

I’m using an image as a background in a div. The image is positioned as center, no-repeat and has cover as size, and will therefore show different sections when viewed on different screens/devices. Nothing strange about that.

I would like to position some markers on the image, and that those markers have absolute positions relative to the background image, regardless of the screen/device.

enter image description here

Is this even possible?

I’ve tried to position the markers as absolute and with percent positions but that, needless to say, didn’t work.

<DIV style="width:100%;height:100vh;background-image: url('temp/bg.jpg');  background-position: center;background-repeat: no-repeat; background-size: cover;">

    <DIV style="position:absolute;top:82%;left:15%">Marker</DIV>

</DIV>
Tags:

3

Answers


  1. 0

    You need to define your image container as relative and the marker as absolute

     .background-container {
            width: 100%;
            height: 100vh;
            background-image: url('https://media.istockphoto.com/id/491151340/photo/tractor-on-the-field.jpg?s=1024x1024&w=is&k=20&c=oOnIey9ftQpeafOhTqd7HigM9JEnLsnJZZpy3WhrLaE='); /* Replace with your image URL */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .marker {
            position: absolute;
            /* chose your position values */
            top: 82%; 
            left: 15%; 
            transform: translate(-50%, -50%);
            background-color: red;
            padding: 5px;
            border-radius: 50%;
            color: white;
        }
     <div class="background-container">
        <div class="marker">Marker</div>
    </div>
    Login or Signup to reply.
  2. 0 
    Using background-size:cover can be challenging because of the nature of it, regardless of screen size. 

Using an img tag instead of background-image helps you to achieve your goal. Than position it absolute in a relative container. Than ensure that the aspect  ratio of the image is preserved across different devices.

   
.html file

     <div class="image-container">
      <img src="assets/bg.jpg" alt="Background" class="background-image" />
      <div class="marker" style="top: 82%; left: 15%;">Marker</div>
    </div>


.css file
.image-container {
    position: relative;
    width: 100%;
    height: 100vh; 
    overflow: hidden;
  }
  
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
  }
  
  .marker {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.5); 
    padding: 5px;
    color: white;
    border-radius: 5px;
  }
    Login or Signup to reply.
  3. 0

    Don’t use a background image, they do not resize the way you think in proportion to the screen.

    Use an actual inline image in a container and absolute position your elements in relation to that container in percentage values.

    Something like this.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

.map {
  margin: 10px;
  border: 5px solid red;
  position: relative;
  display: inline-block;
}

.map img {
  max-width: 100%;
  display: block;
}

.box {
  width: 8%;
  height: 8%;
  background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

#pin-1 {
  top: 29%;
  left: 36%;
}

.box:hover>.pin-text {
  display: block;
}

.pin-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 75%;
  white-space: nowrap;
  display: none;
}

.pin-text h3 {
  color: white;
  text-shadow: 1px 1px 1px #000;
}
    <div class="map">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Pleasant_View_housing_development%2C_Missoula%2C_Montana_-_panoramio.jpg/800px-Pleasant_View_housing_development%2C_Missoula%2C_Montana_-_panoramio.jpg" alt="" />
  <div id="pin-1" class="box">
    <div class="pin-text">
      <h3>My House</h3>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search