javascript - Keep div overlay relative to background image regardless of window size -

javascript - Keep div overlay relative to background image regardless of window size -

i want overlay text on background image background-size: cover.

problem here how maintain overlay div @ same position, relative background image, regardless of window's size?

here's fiddle play around: http://jsfiddle.net/resting/2yr0b6v7/

so want position word eye on eye of cat, regardless of window size.

css or js solutions both welcomed.

edit: added js alternative

i convinced done css , gave up, remembered new(ish) css units vh , vw....

jsfiddle

css

html, body{ height: 100%; width: 100%; } .cat { height: 100%; width: 100%; position: relative; background:url(http://placekitten.com/g/800/400) no-repeat center center / cover; } .place-on-eye { position: absolute; color: #fff; margin:0; } @media (min-aspect-ratio: 2/1) { .place-on-eye { bottom: 50%; left: 46.875%; margin-bottom: 1.25vw; } } @media (max-aspect-ratio: 2/1) { .place-on-eye { bottom: 52.5%; left: 50%; margin-left: -6.25vh; } }

explanation

so left eye @ approx 375, 190, , since image centered, want know how far off center is, 25, 10. since image covering, size of image alter based on whether aspect ratio of viewport greater or less aspect ratio of background image. knowing this, can utilize media queries position text.

the image 2:1, when viewport aspect ratio > 2:1, know width of image width of viewport, left position of <p> should 46.867% (375/800). bottom position going more hard because image extends beyond viewport top , bottom. know image centered, first move <p> middle, force 2.5% (10/400) of height of image. don't know height of image, know image aspect ratio , width of image equal width of viewport, 2.5% of height = 1.25% width. have move bottom 1.25% width, can setting margin-bottom:1.25vw. incidentally, can without vw in case because padding calculated relative width, have set padding-bottom:1.25%, won't work in next case have position left relative height.

the case when aspect ratio < 2:1 analogous. height of image height of viewport, bottom position should 52.5% (210/400) , left calculated similar above. move on center, 3.125% (25/800) width of image, equal 6.25% height of image, equal viewport height, margin-left:-6.25vh.

hopefully right , helps out!

js alternative

jsfiddle

here's alternative uses js. uses features foreach , bind might cause problems depending on how old browser need work on, replaceable. js can straight calculate scaled dimensions of bg image makes positioning easier. not elegant code, here goes:

//elem: element has bg image //features: array of features mark on image //bgwidth: intrinsic width of background image //bgheight: intrinsic height of background image function featureimage(elem, features, bgwidth, bgheight) { this.ratio = bgwidth / bgheight; //aspect ratio of bg image this.element = elem; this.features = features; var feature, p; (var = 0; < features.length; i++) { feature = features[i]; feature.left = feature.x / bgwidth; //percent left border of bg image feature resides feature.bottom = (bgheight - feature.y) / bgheight; //percent bottom border of bg image feature resides feature.p = this.createmarker(feature.name); } window.addeventlistener("resize", this.setfeaturepositions.bind(this)); this.setfeaturepositions(); //initialize <p> positions } featureimage.prototype.createmarker = function(name) { var p = document.createelement("p"); //the <p> acts feature marker p.classname = "featuretag"; p.innerhtml = name; this.element.appendchild(p); homecoming p } featureimage.prototype.setfeaturepositions = function () { var eratio = this.element.clientwidth / this.element.clientheight; //calc current container aspect ratio if (eratio > this.ratio) { // width of scaled bg image equal width of container this.scaledheight = this.element.clientwidth / this.ratio; // pre calc scaled height of bg image this.scaleddy = (this.scaledheight - this.element.clientheight) / 2; // pre calc amount of image outside bottom of container this.features.foreach(this.setwide, this); // set position of each feature marker } else { // height of scaled bg image equal height of container this.scaledwidth = this.element.clientheight * this.ratio; // pre calc scaled width of bg image this.scaleddx = (this.scaledwidth - this.element.clientwidth) / 2; // pre calc amount of image outside left of container this.features.foreach(this.settall, this); // set position of each feature marker } } featureimage.prototype.setwide = function (feature) { feature.p.style.left = feature.left * this.element.clientwidth + "px"; feature.p.style.bottom = this.scaledheight * feature.bottom - this.scaleddy + "px"; // calc pixels above bottom border of image - amount below container } featureimage.prototype.settall = function (feature) { feature.p.style.bottom = feature.bottom * this.element.clientheight + "px"; feature.p.style.left = this.scaledwidth * feature.left - this.scaleddx + "px"; // calc pixels right of left border of image - amount left of container } var features = [ { x: 375, y: 190, name: "right eye" }, { x: 495, y: 175, name: "left eye" }, { x: 445, y: 255, name: "nose" }, { x: 260, y: 45, name: "right ear" }, { x: 540, y: 20, name: "left ear" } ]; var x = new featureimage(document.getelementsbyclassname("cat")[0], features, 800, 400);

javascript jquery html css css3