Full Screen Background Image - Wordpress

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:

1. why the 'team' section has a gap top and bottom

That comes from your padding in

.team-images-mobile {
  padding: 10px;
}

2. 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:

1. If you can control the overall HTML, simply move your.team-section background css settings to the .grve-column level; or
2. 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".