I’m trying to do something a little tricky, but I’m not sure if it’s possible (through multiple attempts I’ve failed).
I have an info graphic that I’d like to place on a page at 100% width and have it be responsive. So far, no problem. The reason I want to make it a background image of a div and not just an inline image is that I am using the text replace method — the info graphic image replaces text/code that reflects the data in the graphic.
So, the problem is that the height of the graphic also needs to be responsive and 100% of the background image. Right now the overflow is hiding and cutting off the top and bottom of the graphic until the page is reduced in size.
Does this make sense?
Other background info: I am using twitter bootstrap. Here is my last try at the css:
The image I’m talking about is below the hero unit and is titled “what happens in a showgrounds minute”.
The original image is 900×550, but as I said, it needs to be responsive. And as I said, the problem isn’t the width, it’s the height and not having the overflow hidden when the window gets smaller.
Why am I using a definition list? Well, there’s a lot of information in the graphic that I want to be google-able. I could have used a unordered list, or even a paragraph. It doesn’t seem to make much of a difference, unless I’m wrong, because all the text is hidden.
Unfortunately, the height ‘responsiveness’ isn’t going to work without some cut off. Heights of elements rarely change so it’s not really a factor in responsive design.
Breaking it into smaller images (perhaps 4 or 5) and positioning them independently would probably be better. Then swapping those out for smaller images at the various breakpoints is probably the best way.