背景图像未覆盖整个页面高度。

huangapple go评论79阅读模式
英文:

Background Image not covering full page height

问题

我已将背景图片设置给我的<body>标签,但由于某种原因,图片未能填充以与页面上的内容相对应。我的页面底部只是白色空间,没有背景图片。

我尝试更改图片的高度和宽度,以为是高度的问题,但仍然没有效果。然后我尝试使用background-size:cover;,但仍然留下了底部的白色空间。请帮助!

这是我的工作空间链接:https://replit.com/@SRJCEthanWilde/CS50A-Module13-52-JosohamyMendez#find.html

直接链接到我的页面是:
https://cs50a-module13-52-josohamymendez.srjcethanwilde.repl.co/find.html

英文:

I have set a background-image to my <body> tag and for some reason the image is not filling out to correspond with the content on the page. The bottom part of my page is just white space with no background image.

I tried to change the height and the width of the image thinking it was a problem with the height. It still didn't work. I then tried to use background-size:cover; and it still left the white space at the bottom. Please help!

This is the link to my work space: https://replit.com/@SRJCEthanWilde/CS50A-Module13-52-JosohamyMendez#find.html

and the link directly to my page is:
https://cs50a-module13-52-josohamymendez.srjcethanwilde.repl.co/find.html

答案1

得分: 1

你尝试过为gap使用固定值(例如pxrem)吗?

例如:

.grid {
    gap: 2rem;
}

@media only screen and (max-width: 1024px) {
    .grid {
        gap: 1rem;
    }
}
@media only screen and (max-width: 425px) {
    .grid {
        gap: 1rem;
    }
}
英文:

Have you tried using fixed values (such as px or rem) for the gap?

For example:

.grid {
    gap: 2rem;
}

@media only screen and (max-width: 1024px) {
    .grid {
        gap: 1rem;

    }
}
@media only screen and (max-width: 425px) {
    .grid {
        gap: 1rem;
    }

huangapple
  • 本文由 发表于 2023年8月5日 03:30:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/76838712.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定