How can I position a floating elastic div over an elastic background and make sure that the div remains in the position?

Question

I get it’s not a very specific question, but I would really love ideas.

To clarify, both the floating div and the background would stretch with the window size, but the div would have to remain in the “same” position on top of the background.

Is such a thing even possible?

Here's a jsFiddle: http://jsfiddle.net/778fb958/3/

<div class='background'>    
    <div class='foreground'>
        <img class='tinyguy' src="http://orig05.deviantart.net/2f16/f/2012/027/8/9/16_bit_mario_by_nathanmarino-d4ntfl6.png">
    </div>    
</div>

if you have some code to share, we can [help](http://stackoverflow.com/help/how-to-ask) — WhiteHat, Sep 17 '15 at 11:20
An idea of what you've tried will help, the answers are stabbing in the dark right now and I think of several ways of interpreting the question — Toni Leigh, Sep 17 '15 at 11:26
can you define 'same position' - do you mean relative to the container or the screen? do you mean as a fraction of the screen size or a fixed number of pixels? — Toni Leigh, Sep 17 '15 at 11:28
posiible duplicate http://stackoverflow.com/questions/27727804/responsive-div-scaling-within-background-size-contain-image — Pete, Sep 17 '15 at 12:45
Thanks @Pete !! I'm checking that out, it seems that almost does what I need, I'm trying it out — Calvin, Sep 17 '15 at 13:13
Right now, I'm trying something Pete linked this to. I'll let you know how that works out @AndrewLyndem — Calvin, Sep 17 '15 at 13:16
Hi @AndrewLyndem ! Please take a look a this http://jsfiddle.net/778fb958/3/ I want to create the illusion that little Super Mario is part of the picture. He needs not only to stretch with the image but also be always position in the "same" place. What do you think? — Calvin, Sep 18 '15 at 13:00
Edited your question and +1 it. Will check it out once I'm home, good sir — AndrewL64, Sep 18 '15 at 13:29
Any luck @AndrewLyndem ? I think I got it https://jsfiddle.net/Nat/2a0ggcLs/ — Calvin, Sep 20 '15 at 22:00
Thanks @AndrewLyndem, not too bad for someone who doesn't know javascript I guess :3 — Calvin, Sep 21 '15 at 11:49

score 1 · Answer 1 · answered Sep 17 '15 at 14:56

1

Use percentages.

You can do this with position.

Here's an example with position: absolute; with top and left set to 20%.

Here's an example with no position, but with margin-top and margin-left set to 20%

Notice how the background uses this ...

.background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

... to fill the full screen

answered Sep 17 '15 at 14:56

Toni Leigh

4,830
3
22
36

Thank you Toni! Please take a look a this http://jsfiddle.net/778fb958/3/ I want to create the illusion that little Super Mario is part of the picture, so he needs not only to stretch with the image but also be always position in the "same" place. – Calvin Sep 18 '15 at 12:59
1

@Calvin see here: http://jsfiddle.net/778fb958/10/ - you don't need the foreground div, also, you want `background-size: 100% 100%;` to make your background always stretch with the underlying div. Now when the div stretches Mario stretches too – Toni Leigh Sep 18 '15 at 16:27
Thanks! :) I want to that but still keeping the proper image ratio.. that's part of the challenge – Calvin Sep 18 '15 at 19:46
1

@Calvin ... a lateral thought ... what about combining the images? you could do this in photoshop, but it's actually not very difficult to do server side with an image manipulation library ... whatever your server side flavour there'll be a sophisticated and mature image processing library – Toni Leigh Sep 18 '15 at 20:26
I can see what you're saying but then it wouldn't resize on the fly with the windows resize, would it? Also the purpose it to make the little guy something to be interracted with. – Calvin Sep 19 '15 at 09:08
1

if the little guy is his own, interactive, element then combining the images would not be a good solution, your front end set-up would get messy, so, you want to maintain aspect ratio, allow complete flexibility across screen sizes and give the impression that Mario is a seamless part of the image, yes? – Toni Leigh Sep 19 '15 at 09:22
Yes, Toni. I am a crazy person. – Calvin Sep 19 '15 at 21:59

score 0 · Answer 2 · answered Sep 17 '15 at 11:19

I don't quite understand your use case, but I think you may find viewport units handy:

//Background should be 100% of viewport size
#background {
  width: 100vw;
  height: 100vh;
}

//Div should be a square that is 20% viewport size and is positioned 50% of the background from the top and left
#div {
  position: fixed;
  left: 50vw;
  height: 50vh;
  width: 20vw;
  height: 20vh;
}

score 0 · Answer 3 · answered Sep 17 '15 at 11:24

position:fixed solves a lot of issues. It makes the specified div stay on that position relative to the window its displayed in.

If you want to show the fixed div relative the same position to another div you need to use javascript to scroll it along with user scroll.

body { margin:0px;padding:0px;}
#background { 
  width:100vw;
  height:100vw;
  
  display:block;
  margin:0px;
  padding:0px;
    background-image:url(https://i.stack.imgur.com/phmE7.jpg);
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  
}
@media screen and (orientation:portrait) {
    #background {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}
#header {
  width:100%;
  height:150px;
  background-color:red;
  color:white;
  font-size:4em;
  position:fixed;
    font-family:sans-serif;
    text-align:center;
    top:0px;
  left:0px;
  }

<div id="background">
  <div id="header">
  Maybe.... it's aliens
    </div>
  </div>

score 0 · Accepted Answer · answered Sep 20 '15 at 21:59

I wrote a function in javascript to resize the div in proportion to the background original size. I called the function upon loading and in the "resize" window event from jquery.

Code bellow. It's a little mess it need some tiding up, but I hope it helps however stumbles upon this.

→ https://jsfiddle.net/Nat/2a0ggcLs/

function placelittleguy() {
var windowsw = window.innerWidth;
var windowsh = window.innerHeight;

//original image size
var w1 = 1000;
var h1 = 667;

//tiny guy position in relation to original background size
var top1 = 220;
var left1 = 620;

//tiny guy size in relation to original background size
var div1w = 100;
var div1h = 200;

//vertical screens
if ((windowsh / windowsw) > (h1 / w1)) {

    //size up
    document.getElementById("element1").style.width = ((windowsw / w1) * div1w) + "px";
    document.getElementById("element1").style.height = ((windowsw / w1) * div1h) + "px";

    //position
    var h2 = (windowsw * (h1 / w1));
    var posy = (top1 * (windowsw / w1)) + ((windowsh - h2) / 2);

    document.getElementById("element1").style.top = posy + "px";
    document.getElementById("element1").style.left = (left1 * (windowsw / w1)) + "px";



    //panoramic screens
} else {

    //size up
    document.getElementById("element1").style.width = ((windowsh / h1) * div1w) + "px";
    document.getElementById("element1").style.height = ((windowsh / h1) * div1h) + "px";

    //position 
    var w2 = (windowsh * (w1 / h1));
    var posx = (left1 * (windowsh / h1) + ((windowsw - w2) / 2));

    document.getElementById("element1").style.left = posx + "px";
    document.getElementById("element1").style.top = (top1 * (windowsh / h1)) + "px";

}

}

How can I position a floating elastic div over an elastic background and make sure that the div remains in the position?

4 Answers4