HTML twig is not rendered if div content is empty with style & background imagei

why this html.twig file is not rendered

<div style="height:500px; background-color:#ffffff;background-image: url(/user/pages/01.home/_slideshow/image.jpg); background-position: initial;" ></div>

and this one is rendered, it seems because of div content HELLO

<div style="height:500px; background-color:#ffffff;background-image: url(/user/pages/01.home/_slideshow/image.jpg); background-position: initial;" >HELLO</div>

very weird, or i miss some obvious things

Thanks

On first glance it would seem that the first div has too little to go on to determine it’s rendered size, ie you set a height in CSS but no width or structural declaration. Have you tried applying width: 500px;display: block to it?

thank you for taking a glance, but tried already with display: block just add some width but unfortunately same result

This isn’t a problem with Grav. If you google “empty div not displaying” and variants, you will see this everywhere. Have you tested on a couple different browsers? Can you not insert a nbsp; if the field is empty? Have you tried min-height? It worked fine for me (but no image, of course, in Chrome).

min-height does nothing in my case, so i will insert nbsp; for now. I will make some tries after reading some posts, i was unaware of that case of empty div, every day you learn something. thanks again for putting me on the right track