Q:

Responsive CSS background image - how to make content follow

I have CSS background image in header div. Image responsiveness works fine but I cant get it work so that content under header image "follows" image when it resizes.
Problem is that when I give height value to header image div then div height is fixed. And when I do not give height image is not shown at all.
See working example JSFIDDLE
Any help how to fix?

A:

Here is your solution:
Issue:- Height value in percentage doesn't work, until unless it has been used in any position layer.
Solution:- Instead of height. Use "padding-bottom" OR "padding-top" value to make height responsive. Becasue percentage values work well with "padding".
The calculation is very simple to get the relevant responsive height value of any background image.
For Example:- If Background image dimensions are (1200 width) x (450 height) Pixels. Then image responsive "height" value would be: "37.5%"
Formula:- Y (×) 100 (÷) X. Which is (450×100÷1200) = 37.5%
Solution URL:- http://sandeepparashar.com/stackoverflow/responsive-css-background-image-height.html
Code:-
.custom-header-option {
    padding-bottom:37.5%; /* This will make height responsive */
    background-image: url('http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

If need more help, most welcome :)

