Cover image position relative to text

Question

I am trying to set a text to overlap an image but the position should stay same on all screen sizes.

Example:

Here is an example of what I have tried demo

 .c-txt-on-img{ position: relative; } .c-txt-on-img .txt{ font-size: 30px; font-weight: bold; font-family: arial, sans-serif; max-width: 200px; position: absolute; top: 80px; left: 158px; } .c-txt-on-img .img { width: 100vw; height: 100vh; background-size: cover; background-position: center center; } 

  <div class="c-txt-on-img"> <div class="txt">Tony where are you !!!!</div> <div class="img" style="background-image: url(http://theprojectstagingserver.com/stackoverflow/txt-on-img/comic.jpg)"></div> </div> 

It works on a specific screen-size only, I can fix this on different sizes using different media queries but that will take too much time!

Answer 1

There are 2 main challenges:

1) Align the image and text to always stay on the same spot.

2) Aligning will leave extra uneven space on top/bottom & left/right side of the image so we need to increase image size enough that it covers the whole screen.

For first part we can define same top left position to text and image, then give a negative translate percentage to image so that top left origin of image is the same spot where the text bubble is.

Next we can calculate the space on right/left/top/bottom of image & increase its width till no negative space is left.

Below is a GIF image to explain this better:

Here is the DEMO

 var viewportOffset = [], winWidth, winHeight, inLoop = false, resizeTimeout; $(function(){ init(); }); $(window).resize(function(){ clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function(){ init(); }, 500); }); function init() { winWidth = $(window).width(); winHeight = $(window).height(); inLoop = false; coverImage(); } function coverImage() { $('.js-cover-img').each(function (i) { viewportOffset[i] = getViewportOffset($(this)); if(!inLoop){ $(this).width('auto'); $(this).height('auto'); } var imgWidth = $(this).width(); var imgHeight = $(this).height(); viewportOffset[i].right = winWidth - imgWidth- (viewportOffset[i].left); viewportOffset[i].bot = winHeight - imgHeight- (viewportOffset[i].top); if(viewportOffset[i].top < 0){ var vertViewportOffest = viewportOffset[i].bot; }else if(viewportOffset[i].bot <= 0){ var vertViewportOffest = viewportOffset[i].top; }else{ var vertViewportOffest = viewportOffset[i].top + viewportOffset[i].bot; } if(viewportOffset[i].right < 0){ var horViewportOffest = viewportOffset[i].left; }else if(viewportOffset[i].left < 0){ var horViewportOffest = viewportOffset[i].right; }else{ var horViewportOffest = viewportOffset[i].left + viewportOffset[i].right; } if(horViewportOffest > 0 || vertViewportOffest > 0){ $(this).width(imgWidth + 20); inLoop = true; coverImage(); return false; } }); } /* Get's the viewport position */ function getViewportOffset($e) { var $window = $(window), scrollLeft = $window.scrollLeft(), scrollTop = $window.scrollTop(), offset = $e.offset(); return { left: offset.left - scrollLeft, top: offset.top - scrollTop }; } 

 body, html{ padding: 0; margin: 0; width: 100%; height: 100%; } .c-txt-on-img { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .c-txt-on-img .txt { font-size: 30px; font-weight: bold; font-family: arial, sans-serif; max-width: 200px; position: absolute; top: 30%; left: 30%; z-index: 2; transform: translate(-50%, -50%); text-align: center; } .c-txt-on-img .img { transform: translate(-28.5%, -23%); z-index: 1; position: absolute; top: 30%; left: 30%; min-width: 870px; } .c-txt-on-img img{ display:block; width: 100%; } 

 <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script> <div class="c-txt-on-img"> <div class="txt">Tony where are you !!!!</div> <div class="img js-cover-img"> <img src="http://theprojectstagingserver.com/stackoverflow/txt-on-img/comic.jpg"> </div> </div>