背景无法垂直覆盖全屏问题咨询附相关HTML/CSS代码

Hey there! I see your background is only showing half the page—let's get this sorted out. The main issue in your code is an invalid CSS property, but we'll also cover a few other tweaks to make sure it works reliably.

1. The Critical Error: Invalid background-height Property #

First off, background-height isn't a valid CSS property. That's why your .bg element isn't stretching to full height. Instead, you need to set the element's height directly, not a background-specific height.

Corrected CSS Code #

body, html {
  height: 100%;
  margin: 0; /* Add this to remove default body margin */
  padding: 0; /* Remove default padding too */
}

.bg {
  background-image: url(myimage.png);
  height: 100%; /* Replace background-height with height */
  min-height: 100vh; /* Optional: Use this instead for better responsiveness */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

2. Why min-height: 100vh is Better (Optional) #

Using 100% for height depends on the parent element's height (which is why you set body, html { height: 100% }). But if your content ends up being taller than the viewport, height: 100% will cut off the background.

min-height: 100vh ensures the background covers at least the full viewport height, and stretches further if your content is longer. This is more robust for most cases.

3. Other Potential Fixes #

If the above doesn't work, check these:

• Remove any default margins/paddings on parent elements (we added margin: 0; padding: 0 to body, html for this)
• Make sure no parent elements of .bg have overflow: hidden set accidentally
• Verify that your image path (myimage.png) is correct—if the image fails to load, you might not notice the background issue properly

Give these changes a try, and your background should cover the full page vertically!

内容的提问来源于stack exchange，提问作者Hopeless Coder 99