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?

回答1:

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

回答2:

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;
    }

来源：https://stackoverflow.com/questions/25637562/responsive-css-background-image-how-to-make-content-follow

标签

css

responsive-design