How to keep elements relative to a specific point in a background-image?

Question

I got an background-image of a big white square, and now I'm trying to keep a div positioned in the corner of that square, but when I resize the page, that div don't follow that corner. I suppose that occur because of the background-size: cover;, since that condition keep zooming in/out when resized.

I also would like to keep that square in the proportion of the white square.

background-image and div in normal size:

resized background-image and div:

I'm already using position absolute and relative.

I've been trying to use only flexible values (vh/vw, %)

Full code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .bg {
        background-image: url("https://i.pinimg.com/originals/3b/6a/ed/3b6aede10e30d93886268de33d67039e.jpg");
        height: 100vh;
        width: 100vw;
        background-size: cover;
        position: relative;
      }
      .el {
        width: 5%;
        height: 5%;
        position: absolute;
        left: 13.8%;
        top: 28.5%;
        background: orange;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div class="bg">
      <div class="el"></div>
    </div>
  </body>
</html>

score 2 · Accepted Answer · edited Apr 08 '22 at 23:07

One problem is that the image you are using as the background is not only a "black square" since it has white paddings.

If you want everything to align in the box, you either need to:

calculate how much the image has paddings before the box (which I don't recommend doing).
crop the image a bit, removing the white padding.

Here are the calculations after getting rid of the white paddings, and leaving just the borders. You can mess around with the width, height, left, and top for more desired results.

.bg {
  background-image: url("bg.jpg");
  height: 50vh;
  width: 50vh;
  position: relative;
  margin: 25vh 25vw;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: initial;
  background-size: cover;
}


/* Calculating the "borders" of the image out of the width and height, in this case 1.7% * 2 */
.el {
  width: calc(100% - 3.4%);
  height: calc(100% - 3.4%);
  position: absolute;
  left: 1.7%;
  top: 1.7%;
  background: orange;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

My image has a little bit of white at the bottom, since I cropped the picture a bit badly. Your element width& height ratio should always be 1:1, if you want the .el to work.

Also, if the purpose is just to make a box with black borders, you might want to do it with just HTML and CSS, since it's definitely more complex using background images =)

I have [edited your code](https://stackoverflow.com/posts/71803795/revisions). I removed the run code option because you just provided CSS and run code does not work. — Christian, Apr 08 '22 at 23:13
Thats cool, I do understand your explanation, but now I really don't know how I could apply this same result for a different image. In a different code, I'm using a draw (1920 x 1440) as background-image, and that draw have some lamps in it. My objective was implement a kind of light using a div with a transparent color, but when I resize the page the "light div" breaks his positioning. It's not a white-border question anymore. — R01machin, Apr 09 '22 at 13:27
I think that maybe i'm gonna need to use tag instead of the background-image property, because the content is gonna interact with the image. I just read about the difference between these two [here](https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image). — R01machin, Apr 09 '22 at 14:06

How to keep elements relative to a specific point in a background-image?

1 Answers1