Background image cannot be seen without text on it in web page – Html

Updated to address percentage value calculation

height of % value is calculated based on its parent

When using a % value for a height, according to MDN doc

The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto.

That is, unless its parent has an explicit height, the child cannot determine the % value. Conversely, when you set height: 100%, you’re saying "100% of the parent height," and without explicit parent height, it becomes height: auto which then collapses without its own child content or explicit height.

Block-level container collapses unless it has content or specific height

By default, any div, section, or other block-level containers will collapse their height to 0 unless it has some content. Also, whatever background image you set up will also not show up, because the container is not rendered.

If there’s small amount of text (e.g. one line of text), the container will grow only so much, so that the container can envelop the content inside. The background image will show through the given height of the container.

To address this behavior, you could:

• Add a min-height to set a minimum height even when there’s no to little content, and will grow as needed if the content is bigger
• Add a height to set a fixed value of height regardless of the amount of content,
• Add the image as content rather than background, so it could occupy the necessary height. In this case, you’d need to consider other position values to place other content in front of the image.

See the code snippet below.

By default all section has the default 50% height value as you noted. Also, each block has a colored border to show its area.

1. First section has no content and no specific height or min-height. This collapses to 0px height by default.
2. Second section has a small amount of text content, which increases the container height only by the minimum required amount.
3. Third section has a min-height to ensure a minimum space. As you add more content here, the container will grow as needed.
4. Fourth section has a fixed height value to 100vh. This will stay static value, whether you have no content, little content, or a crazy amount of content inside.

*, * > * {
  box-sizing: border-box;
}
main {
  border: 1px solid purple;
}
section {
  background-image: url(https://picsum.photos/2000);
  height: 50%;
  border: 1px solid green;
}
section + section {
  margin-top:10px;
}
.min-height {
  min-height: 200px;
}
.full-viewport {
  height: 100vh;
}

<main>
  <section class="empty">
    <!-- no text content here -->
  </section>
  <section class="one-line">
    One line of text here.
  </section>
  <section class="min-height">
  
  </section>
  <section class="full-viewport">
  </section>
</main>