1

Say I have an image that has width

width: 100vw;

Is it possible to position a title say 50% of the way down from this image? I can't think of how to do it as the height will be changing based on the vw, so can this be done with CSS only, or do I need Javascript? Either way, how would I do this?

Thanks

Edit: I have tried the various suggestions below but it seems that whenever I try to use solely CSS with position:relative it messes up the rest of my code. Is there a javascript function, therefore, that can calculate the height of the image as a % of the page height, and then can I position my title at say 75% of the height of the image?

4 Answers 4

3

I'm not entirely sure if I've understood you correctly or not, but if you want to vertically centre a piece of text over the top of a responsive image, you could do this:

div {
  position: relative;
}
img {
  width: 100vw;
  height: auto;
}
p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
<div>
  <img src="https://unsplash.it/200/100/?random">
  <p>SOME TEXT</p>
</div>

https://jsfiddle.net/fjh6msqL/

3
  • This worked once I added an extra piece of code (see edit). Is it possible to do this with Javascript too?
    – Steve Jobs
    Commented Mar 11, 2017 at 12:29
  • 1
    @SteveJobs I recommend adding the final total of code that worked as your own answer, and perhaps amending your question to fully explain what the problem was.
    – Anko
    Commented Mar 11, 2017 at 14:12
  • @SteveJobs yeah, it's possible with JavaScript too; but generally if something can be done with CSS instead of JS, it should be. Commented Mar 23, 2017 at 20:03
0

Sure, add a parent around the image and set it to inline-block so that it will match the width of the image, add position: relative so that you can absolutely position your title text in relation to the parent, and then either add an element with your title text or use a pseudo element from the parent (that's what I did in this example) and absolutely position that 50% from the top, and use translateY(-50%) to move the image back up 50% of it's own height so it's in the middle of the image vertically. Here is a good article on how to center stuff using CSS https://www.w3.org/Style/Examples/007/center.en.html

div {
  display: inline-block;
  position: relative;
}
div:after {
  content: 'here is your title';
  color: white;
  background: black;
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}
img {
  width: 100vw;
}
<div class="parent">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

0

You can't really do that with an image without using some Javascript. The best solution I think would be to use a div element and set it's background-image property to the image you want to display, and then position your title vertically inside the div. Something like this:

<div style="background: url('url-to-image') no-repeat; background-size: cover; background-position: center center;">
    <h2 class="title"></h2>
</div>

Vertical positioning can be tricky, but there are ways, for example: CSS Vertical align middle

3
  • If you're adding a new element (div), you can just put the img in the div and absolutely position the h2 on top of the img in the div Commented Mar 11, 2017 at 0:59
  • Yes, I see now, for some reason I haven't come across that solution yet. I prefer to avoid using img wherever I can.
    – Pejka
    Commented Mar 11, 2017 at 1:06
  • Could you provide a JSfiddle with some Javascript that will work out what percentage of the screen the height of the image is? Is it then possible, say the javascript function says that the height of the image is 25% of the screen, to place the image at 75% of the height of the image? I have tried the other suggestions but the positioning of the image to relative seems to mess around with my current positioning for my code
    – Steve Jobs
    Commented Mar 11, 2017 at 12:14
0

With CSS margin:auto , max-height:0 with absolute position actually does the magic. this will center your title text perfectly regardless of screen size. Instead of giving title a width and height we can set top, left, right, bottom property to 0 which actually scale the element to its relative parent's size. Hope this helps.

body{
margin:0;
padding:0;
}
.img-placeholder{
  position:relative;
}
.img-placeholder img{
  width:100vw;
  height:auto;
}

.img-placeholder h2{
  position:absolute;
  margin:auto;
  top:0;
  right:0;
  bottom:0;
  left:0;
  max-height:0px;
  text-align:center;
}
<div class="img-placeholder">
      <img src="http://lorempixel.com/output/sports-q-c-640-480-2.jpg">
      <h2>Image Title</h2>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.