Responsive CSS background image - how to make content follow

Question

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?

Try using tag inside header div instead of css background-image — reuelab, Sep 03 '14 at 06:30
Not clear what's meant when you say header image "follows" when image resizes. — kinakuta, Sep 03 '14 at 06:34
It means that content under header image should be attached bottom of header image - not leaving space between header image and content. — ace, Sep 03 '14 at 06:37
This might be helpful, http://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite — Oneezy, Sep 03 '14 at 07:05
If you are only concerned about the space or getting a responsive layout where even after resize, header attaches itself to the content? If it's only about space, `p { margin: 0; }` should work. Browsers tend to attach their own CSS for certain elements like p which you manually need to override. — , Sep 03 '14 at 07:14

score 2 · Accepted Answer · edited Sep 04 '14 at 09:30

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 :)

score 0 · Answer 2 · answered Sep 03 '14 at 06:58

I think what you're trying to do is to remove the "white space" gap?

Try this code: http://jsfiddle.net/0bjgfo16/4/

HTML

    <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg" />

    <div class="content-wrap">
        <p>here is content</p>
    </div>

CSS

    * { box-sizing: border-box; padding: 0; margin: 0; }
    img { max-width: 100%; float: left; }

    .content-wrap {
        width: 100%;
        height: 200px;
        background-color: grey;
        color: #fff;
        float: left;
    }

Responsive CSS background image - how to make content follow

2 Answers2

Linked