Full Screen Background Image - Wordpress - php

Question

I have a 1 page site with full screen scrolling sections.
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
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'
Code for '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>
Link to site

Answer 1

Your problem comes from:
why the 'team' section has a gap top and bottom
That comes from your padding in
.team-images-mobile {
padding: 10px;
}
why my background image is not full screen
This come from the height: 100vh you set in .team-section
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>

Answer 2

The HTML of your "Team section" looks like this now:
<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. And that element has a white background.
So it doesn't really matter with your .team-section style. It's more of an HTML structure issue.
There are 2 direction to solve this:
If you can control the overall HTML, simply move your .team-section background css settings to the .grve-column level; or
Make .grve-element height 0 by setting it as "position: absolute; width: 100%;". You'd need to give .team-images-mobile some padding so they won't overlap with "Team".