CODEWITHSUNDEEP
htmlcss
Sonny Black
Sonny Black

Reputation: 1617

How to get my app to fill the full height on mobile?

As you can see in the screenshot that I took on my iPhone below, the app has a bunch of white space at bottom of the page. This is only happening on mobile. How can I make the page fill the entire screen?

enter image description here

css:

.landing-bg2 {
    background: asset-url("startupstock1.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


}

html:

    <div class="landing-bg2 size">
   .....contents of webpage
    </div>

Edit!

I'm able to use the following:

.landing-bg2 {
    background: asset-url("startupstock1.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

However, I'm then only limited to one BG, if I'd like to have another BG below as your scroll down they just both overlap since they're fixed.. so still looking for a solution.

Upvotes: 1

Views: 153

Answers (1)

Alien
Alien

Reputation: 3668

trying move the background to body tag:

body{
    background: asset-url("startupstock1.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Upvotes: 2

Related Questions