The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS responsive div background image?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #40116

    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%;
    border: 0;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    text-decoration: none;
    text-indent: -9999px;
    div#showgroundsminute dl {
    border: 0;
    padding: 0;
    font-size: 1px;
    text-decoration: none;
    text-indent: -9999px;

    Any help would be greatly appreciated.


    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?



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

    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.


    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.


    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.


    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)
  • The forum ‘CSS’ is closed to new topics and replies.