How can I dynamically change the height of a DIV depending on the background image while still centreing text

Question

I am creating a landing page for my site and would like one of those Jumbotrons to give it a modern and techy feel. I have managed to centre (horizontally and vertically) my text and I am now moving onto the background image. I have come across a problem though as I need the Div to be the height of my background image while the text still being in the centre. Here is my HTML

<div class="jumbo">
  <div class="jumboCon">
    <h1 class="centre">Kraft, unique</h1>
    <p>The best present is a special one</p>
    <div class="action">
      <p>Search!</p>
    </div>
  </div>
</div>

And here is my CSS

.jumbo {
    width: 100%;
    background-image: url(../img/kraft.png);
}


.jumboCon {
    width: 50%;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #fcfcfc;
}

I have read a couple of questions and answers, this one and they recommend just putting the image in the Div but I can't do that as I have text that needs to be centred there as well. Too make it even harder I will not always know the dimensions of the image as this will be were people promote their own pictures.

I would like this kind of effect as seen here on Ghost. I am not very talented with JavaScript but can probably copy and paste! Thanks

Nick

does images have a ratio that you know ? would you use background-size in order to cover image either on width or height of container ? — G-Cyrillus, May 21 '14 at 20:34
?? this is what i mean : http://codepen.io/gc-nomade/pen/exFuB — G-Cyrillus, May 21 '14 at 20:41
Would you be able to make the background images the full width of the page and then centre the text? — nickdbush, May 21 '14 at 20:44
like this http://codepen.io/gc-nomade/pen/exFuB ? or like this http://codepen.io/gc-nomade/full/sLEpx — G-Cyrillus, May 21 '14 at 20:59

score 1 · Answer 1 · answered May 21 '14 at 20:47

I used this handy article to help me write this: http://css-tricks.com/centering-in-the-unknown/. It makes use of pseudo elements such as :before to avoid having to add extra markup to your page.

I changed #jumbo to position: absolute; with a full width and height, and then I used the article's code to centre the element.

.jumbo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/kraft.png);
    text-align: center;
}

.jumbo:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.jumboCon {
    display: inline-block;
    width: 50%;
    margin: 0 auto;
    color: #fcfcfc;
}

But what about the text being centred? – nickdbush May 22 '14 at 16:23 — nickdbush, May 22 '14 at 16:23

score 1 · Accepted Answer · answered May 21 '14 at 21:08

From my comment and if image has a known ratio.

the idea is to set the box and image to same ratio. Then image is resized to lay on 100% of width with background-size.

A pseudo element with a vertical padding in % will stretch the box to fit the ratio.

With a floatting pseudo, you can center text : DEMO

with an inline-block pseudo, you can center and vertical-align content : DEMO

/* center & middle */
.jumbo {
  margin:auto;
  overflow:hidden;
  background:url(http://lorempixel.com/640/480/) no-repeat red;
  background-size:100% auto;
  text-align:center;
}
.jumbo:before {
  content:'';
  padding-top:75%;/* because ratio is 4:3 */
}
.jumbo:before , .jumboCon {
  display:inline-block;
  vertical-align:middle;
}

Notice: image will keep it's ratio, box can grow taller and screen or window ratio might not match.

Thanks, I will use this in my website - +1 – nickdbush May 23 '14 at 20:08 — nickdbush, May 23 '14 at 20:08

LcSalazar · Answer 3 · 2014-05-22T12:40:14.153

0

You can also use a img element, and let it set the size of your div. Then, the inner content div can have a position:absolute and text-align:center, and it will work just as you want. A full image as background, and a centered div in front.

This is an example: http://jsfiddle.net/T5M8B/

EDIT:

Add two more div's with display:table effect to center it vertically. http://jsfiddle.net/T5M8B/1/

edited May 22 '14 at 12:40

answered May 21 '14 at 20:50

LcSalazar

16,524
3
37
69

Would there be any way to centre the text vertically? – nickdbush May 22 '14 at 07:07
Yes, but it would add 2+ divs. You would have to wrap your text into a `display:table` div, and also into a `diplay:table-cell` div. Then the property `vertical-align: middle` would work for you. I've added a fiddler to the answer showing that... – LcSalazar May 22 '14 at 12:39

How can I dynamically change the height of a DIV depending on the background image while still centreing text

3 Answers3