1

To begin, here is a Fiddle example.

What I am attempting to do is center the content (i.e. the h1 and h2) with a flex box that scales to the current size of the background image. Based on my own attempts, I'm assuming this will have to be a JavaScript solution (e.g., I'll have to calculate the size of the background image post-scaling), but I'd certainly welcome any type of solution at all.

I suppose the most succinct way to ask this is: How does one center content on an element using background-size: contain?

Other general questions I have:

  1. What's the best method for calculating the dimensions of a background-image, regardless of what background-size property it is using?
  2. Would something other than a flex box be better at centering content for this specific scenario? It's easy enough to center things when using cover but this seems like a whole new ball game.
  3. Is it possible to make the flex-container (denoted by the red border) match the size and constraints of the background-image with pure CSS? Note that I ultimately want this to be responsive and am not necessarily looking to define static heights.
daveycroqet
  • 2,667
  • 7
  • 35
  • 61

2 Answers2

1

It's not clear of what you really trying to achieve but I suspect you've just missed: 

background-position:50% 50%;

Check: http://jsfiddle.net/farc8h1d/

  1. answer is "no such method in principle".
  2. <center> is still not reproducible by CSS means in full.
  3. for defining width/height ratios by solely CSS see, for example, this: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Update: I think that I've got an idea of what you need. Here is another try: http://jsfiddle.net/6bzzj3j9/4/

Basic idea: to use <img> with width:100% ; height:auto; that defines size of its container. Text is inscribed in that container using position absolute.

c-smile
  • 26,734
  • 7
  • 59
  • 86
  • Thanks for trying to help. View this Fiddle in Chrome (https://jsfiddle.net/w5e7c93n/12/) to see what I want. For some reason, it only works in Chrome. – daveycroqet Oct 09 '15 at 03:51
  • I actually solved this using a JavaScript method, but this seems really good too and I plan to investigate your pure CSS solution. Thanks for the update. – daveycroqet Oct 10 '15 at 04:51
  • Well, by solving layout problems with JS you are entering dark side of the Force. – c-smile Oct 10 '15 at 05:41
  • I agree. Interestingly, I just checked your updated Fiddle again and it only works in Firefox, not Chrome. Is there something terribly wrong with my Chrome? – daveycroqet Oct 10 '15 at 08:01
  • It works in Chrome for me here. In fact I do not see what couldn't work there. – c-smile Oct 10 '15 at 20:54
0

This Fiddle is actually the behavior I was looking for. The JavaScript was furnished by this post.

However, the it only seems to work properly in Chrome; not Firefox or Internet Explorer. I'm investigating but that should better provide insight into what I'm trying to do.

Code:

var img = new Image();
var elem = document.getElementsByClassName("section-1")[0];
img.src = window.getComputedStyle(elem, null).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");

function resize() {
    var bgHeight = elem.offsetWidth * img.height / img.width;
    elem.style.height = bgHeight + 'px';
}
window.onresize = resize;
resize();
Community
  • 1
  • 1
daveycroqet
  • 2,667
  • 7
  • 35
  • 61