Search code examples
htmlcssjquery-backstretch

Parent height smaller than child, why?

I'm trying to stretch an image vertically in a parent container of my site (not the full body), it is the div with the id "imagen-fondo"

I have tried either backstretch plugin and also just css background-image with background-size to do it.

But the problem in both cases is that the calculated height of the parent container is smaller that the immediate child height, so, the background image looks smaller than the content itself.

How can I make it to be the same height as his immediate child or at least bigger?

You can see the live demo here:

http://50.21.181.12:3001/plantillas/mba

Screenshot shows the height of the parent div

Screenshot shows the height of the child div

UPDATE:

I think the problem is that div#imagen-fondo is getting the height of the window and not of his content, that is the reason that when the screen is big, the problem doesn't happen, but when the height of the window is smaller than the content it happens, you can check it with this two screenshots, just as you start scrolling vertical the background image ends:

step 1, scroll to the top step2, scrolling a little shows that the background ends

Something with overflows?

UPDATE 2:

For now I introduced some javascript to make it work,

Getting the footer offset position and stretching the height of the ".backstretch" div to that height.

But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.

If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.

Solution

  • For now I introduced some javascript to make it work,

    Reading the footer position and stretching the height of the ".backstretch" div to that height.

    But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.

    If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.