responsive bg image

[asma]

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?

[sadunaresh]

100% of the body

both width and height…?

a PEN would help us in helping you….

[Paulie_D]

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.

[asma]

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

[asma]

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.

[Junni]

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

[Paulie_D]

https://css-tricks.com/perfect-full-page-background-image/

[asma]

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?

[Paulie_D]

Try using background-size: cover;

[Author]

Posts