Grow your CSS skills. Land your dream job.

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 64%.it 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 issue.is 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

    http://jsfiddle.net/mEuEe/ 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.

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