Responsive CSS background image - how to make content follow


Tags: css,responsive-design

Problem :

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?



Solution :

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


    CSS Howto..

    How to add rows to a responsive grid

    How to avoid an hover on a menu item to affect the menu items on the right

    show hidden div below current row of divs in responsive layout with jquery

    How to override inline style dynamically?

    How do I center numbers in a table from Google Visualization API?

    How about taking out Bootstrap style? [closed]

    How to use media queries in an effective way? [closed]

    how can I fetch a website and overwrite some ot its html and css [closed]

    How can i make the responsive design using CSS?

    how to change size of the element using css?

    How to fix a 3x3 block of images with CSS

    How to apply “-webkit” css rules using jquery .css

    Css flex-box - How to align a single item to the bottom while keeping the other items to the top

    How to make stylish pageviews counter using html and css? [closed]

    How to Obtain Contents of HTML Element in CSS

    How to add text to a CSS Sprite

    how to have spacing html/css

    How to target images with dynamically generated ids with CSS

    How does the CSS position on a div affects position of sibling division?

    how to set transform for div without effect on background image?

    a[title] not showing expected result [closed]

    How can I change the color of my body when using Bootstrap?

    how to make content to be fixed inside scroll div using only css?

    How to layout images in a grid? [closed]

    ASP Listview. How to hide a table row using CSS

    How to style a built-in comment box imported from a third party?

    How to process which button is selected in an HTML form?

    How to disable and re-enable tabindex of hidden/visible elements?

    How to create a slanting border with css

    How to animate a rotated DOM element with CSS