Full Screen Background Image - Wordpress-CodePudding

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 >

  <div >
    <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>

CodePudding user response：

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 >

  <div >
    <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>

CodePudding user response：

The HTML of your "Team section" looks like this now:

<div >
    <div >
        <div >
            <h2 style="text-align: center;">Team</h2>
        </div>
        <div >
            <div >
                <div >
                    <div >
                       ...
                    </div>
                </div>
            </div>
        </div>
        <div  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".