Grow your CSS skills. Land your dream job.

responsive div background image?

  • # October 2, 2012 at 1:59 pm

    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:

    div#showgroundsminute {
    background: transparent url(“../img/showgrounds-min-v2.jpg”) no-repeat 50% 50%;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    border: 0;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    text-decoration: none;
    text-indent: -9999px;
    }
    div#showgroundsminute dl {
    border: 0;
    margin:0;
    padding: 0;
    font-size: 1px;
    text-decoration: none;
    text-indent: -9999px;
    }

    Any help would be greatly appreciated.

    # October 3, 2012 at 11:44 am

    Can we see BOTH the HTML & CSS in Codepen (or perhaps you have a link) so we can help properly?

    At the very least we need to know some sizes (div/image etc).

    I do have one question though…why are you using a Definition List item?

    # October 3, 2012 at 1:04 pm

    Thanks!

    Here is the link, which lasts 6 hours before I have to refresh it:

    http://showgroundsonline.com/new_site/codepen/

    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.

    Thanks for any help that can be provided.

    # October 3, 2012 at 1:10 pm

    just realized, I might have to use multiple images at different media queries. That might solve the problem (but then it is adaptive and not really responsive).

    Thoughts? Thanks.

    # October 3, 2012 at 1:22 pm

    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.

    # October 3, 2012 at 2:11 pm

    I was afraid of that … another option I was thinking of was using a carousel. I really want to get that google juice in there, so I’ll have to do something else.

    Thanks for your opinion.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".