azmd108 azmd108 - 1 year ago 66
CSS Question

CSS/HTML place text under image, doesnt matter which viewport/res

i want to center a image and place some text under it.

The picture should be everytime in the middle of the screen, doesnt matter how i scale the viewport. Also the text has to be under the picture everytime.

The Backgroundcolor has to be


It worked for me on one screen with this , but if i watch it on another screen, with other resolution, the text is not centered under the image anymore.

Also the span has to be positioned absolute left with -100%, jQuery slides it then to 50%


<div id="sh_start">
<img src="test.jpg"></img>


body, html { font-family: arial; font-size: 12px; margin:0; padding:0; width: 100%; height: 100%; background-color:#fff;overflow:hidden;}

#sh_start img {display: block;padding:5% 0 0 30%;width: 40%; height: auto; position:absolute; top:5%;left:0; right:0; bottom:0;}

#sh_start span {width: 100%; height: auto;display:block;position:absolute;top:58%;left:50%; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;}

#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;}

Answer Source

You can do this quite simple using flexbox:

  $( "#sh_start span" ).animate({
    left: "50%",
    left: "toggle"
  }, 5000, function() {
    // Animation complete.
#sh_start img {display: block;width: 40%; height: auto; }
#sh_start span{width: 100%; height: auto;display:block; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;
position: relative; left: 100%;
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;display:flex;align-items: center; justify-content: center;flex-direction: column;text-align: center;}
<script src="//"></script>
<div id="sh_start">
       <img src="">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download