Question 30692 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Full Screen Background Image – WordPress

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

white gaps on mobile

Tags:

2

Answers


  1. 0

    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;
}
    1. 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>
    Login or Signup to reply.
  2. 0

    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".
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search