The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

responsive bg image

  • # September 19, 2013 at 2:19 pm

    i am making a responsive web design. i have a div with background image and this div is taking 100% of the body and padding bottom of works perfectly responsive, but my problem is when i make another div with same background-image,padding bottom and 100% width and preview it in browser the hight of the first div shrinks. my question is why first div shrinks when secon div is placed just after it?

    # September 19, 2013 at 10:04 pm
    100% of the body

    both width and height…?

    a PEN would help us in helping you….

    # September 20, 2013 at 2:03 am

    this div is taking 100% of the body and padding bottom of 64%

    I’d love to know why it needs that much bottom padding.

    # September 20, 2013 at 10:07 am

    the container div is taking 100% of the screen. that much bottom padding is to set its hight.

    # September 20, 2013 at 10:14 am

    what i mean to say is that much bottom padding is to resolve hight there any other way to set hight for responsive background images? plz a code pen would be helpfull for responsive background image.

    # September 20, 2013 at 10:28 am

    Dear Asma AOA, first you have to give a code pen about you problem then it will be more easy for us to solve that problem

    # September 20, 2013 at 11:24 am here is my code.the width of the wrapper div shrinks with the browser size but not the hight whigh makes the background image elongated. how to make hight responsive?

    # September 21, 2013 at 1:03 am

    Try using background-size: cover;

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed