0

Here is the example i'm testing on : Bootstrap starter theme

You can try with inspect element. Why cant i change height of header tag or the background image of it with %? I have tried using px and it works like that.For example height:800px; But if i use height:80%; it wont work. Can someone explain how this works ? I don't know what am i doing wrong.

Aco
  • 37
  • 1
  • 7
  • For the `header` to respect a height given in percent, its parent also must have a `height`, and if that as well is given in percent, the next parent etc. Can you tell if that is the case? ... One often ends up with this rule `html, body { margin: 0; height: 100%; }` – Asons Apr 20 '16 at 05:00
  • 1
    Possible duplication http://stackoverflow.com/questions/8262852/css-height-in-percent-not-working and http://stackoverflow.com/questions/16642866/height-percentage-not-working-in-css and http://stackoverflow.com/questions/21357238/css-height-100-percent-not-working – Ismail Farooq Apr 20 '16 at 05:02
  • @LGSon Yeah,this was missing `html, body { margin: 0; height: 100%; }`.Tnx a lot mate,saved me a lot of time! – Aco Apr 20 '16 at 05:07

1 Answers1

0

When you are giving height is % value its reffere also to parent of this element. If you want to force header to have 80 % of screen height you have to take it out of the DOM flow by setting it as position:absolute.

So css can look like this : 

.header-image {
position: absolute;
height: 80%;
}
Ganga
  • 787
  • 1
  • 9
  • 27