[英]Full Screen Background Image - Wordpress
I have a 1 page site with full screen scrolling sections.我有一个带有全屏滚动部分的 1 页网站。 Each section displays correctly on desktop, but on mobile the 'team' section has a white block top and bottom.每个部分在桌面上都能正确显示,但在移动设备上,“团队”部分的顶部和底部都有一个白色块。
I have made another section for teams ('team2test') for use only on mobile - with HTML to try to make the section full height but the background image is not full screen我为团队制作了另一个部分('team2test'),仅在移动设备上使用 - 使用 HTML 尝试使部分全高,但背景图像不是全屏
Please assist in either why the 'team' section has a gap top and bottom - or why my background image is not full screen in 'team2test'请协助解释为什么“团队”部分的顶部和底部有间隙 - 或者为什么我的背景图片在“team2test”中不是全屏
Code for 'team2Test': “team2Test”的代码:
body, html { height: 100%; margin: 0; }.team-images-mobile { display: block; margin-left: auto; margin-right: auto; padding: 10px; width: 200px; height: 200px; }.team-section { background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png); background-position: center; background-size: cover; background-repeat: no-repeat; height: 100vh; width: 100%; top: 0; left: 0; right: 0; bottom: 0; position: relative; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="team-section"> <div class="team-images-mobile"> <img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" > <img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt=""> <img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt=""> </div> </div>
Your problem comes from:你的问题来自:
That comes from your padding in这来自你的填充
.team-images-mobile {
padding: 10px;
}
This come from the height: 100vh
you set in .team-section
这来自height: 100vh
您在.team-section
中设置的 100vh
body, html { height: 100%; margin: 0; }.team-images-mobile { display: block; margin-left: auto; margin-right: auto; width: 200px; }.team-section { background-image: url(https://neuefund.com/wp-content/uploads/2022/01/team_7693a7d4f435b52cec2b4ce8cbbf00a4.png); background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; top: 0; left: 0; right: 0; bottom: 0; }.team-section img { width: inherit; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="team-section"> <div class="team-images-mobile"> <img src="https://neuefund.com/wp-content/uploads/2022/01/MAX-300x300.png" alt="" > <img src="https://neuefund.com/wp-content/uploads/2022/01/KRISH-300x300.png" alt=""> <img src="https://neuefund.com/wp-content/uploads/2022/01/COFIELD-300x300.png" alt=""> </div> </div>
The HTML of your "Team section" looks like this now: “团队部分”的 HTML 现在看起来像这样:
<div class="grve-column wpb_column grve-column-1">
<div class="grve-column-wrapper">
<div class="grve-element grve-text">
<h2 style="text-align: center;">Team</h2>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<div class="team-section">
<div class="team-images-mobile">
...
</div>
</div>
</div>
</div>
<div class="grve-empty-space grve-height-1x" style=""></div>
</div>
</div>
If you check in your browser inspector , you'd find that the .grve-element
(the heading text "Team") is taking up space before the actual .team-section
in your code.如果您检查浏览器检查器,您会发现.grve-element
(标题文本“团队”)在代码中实际的.team-section
之前占用了空间。 And that element has a white background.该元素具有白色背景。
So it doesn't really matter with your .team-section
style.因此,您的.team-section
样式并不重要。 It's more of an HTML structure issue.这更像是一个 HTML 结构问题。
There are 2 direction to solve this:有两个方向可以解决这个问题:
.grve-column
level;如果您可以控制整体 HTML,只需将 your.team-section 背景 css 设置移动到.grve-column
级别; or或者.grve-element
height 0 by setting it as "position: absolute; width: 100%;".通过将其设置为“位置:绝对;宽度:100%;”,使.grve-element
高度为 0。 You'd need to give .team-images-mobile
some padding so they won't overlap with "Team".你需要给.team-images-mobile
一些填充,这样它们就不会与“团队”重叠。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.