CODEWITHSUNDEEP
cssscreenbackground-imagemedia
keewee279
keewee279

Reputation: 1654

CSS: Page content and background image getting cut off on mobile screen

I am new to CSS and am looking for some help with the following.

I have an HTML page with the below structure at the beginning of its body. Inside the body I have a form with the class "bgBanner".

The idea with this is to set a background image only for the form but not for the rest of the body.

When viewing this on the desktop everything looks ok but when viewing it on a mobile / smartphone everything gets cut off at the bottom edge of the screen and I don't get a scrollbar there.

Since I am new to this I guess one of my styles might overwrite another or I am using "overflow" the wrong way. Can someone help me with this ?

My HTML: 

<!-- ... -->
<body>    
    <div class="wrapper">
        <?php require_once("includes/menu.php"); ?>
        <section id="main">
            <form id="frmLogin" class="bgBanner">
            <!-- ... -->

My CSS: 

html, body {
    height: 100%;
    overflow: auto;
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
}
form, #main {
    height: 100%;
    overflow: auto;
}
#main {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-left: 8.33%; /* col-1 */
    margin-right: 8.33%; /* col-1 */
    overflow: hidden;
}
.bgBanner {
    background-image: url('../images/banner-M.jpg');
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 600px;
}

Many thanks for any help with this, Mike

Upvotes: 0

Views: 3871

Answers (2)

keewee279
keewee279

Reputation: 1654

I got this to work by removing the overflow from form and #main + by changing the CSS for html and body as follows: 

html, body {
    height: 100%;
    width: 100%;
}
html {
    overflow: auto;
}

This is working for me now on both desktop and mobile.
However, since I am new to this it might not be the best approach so if there are any comments please let me know.

Thanks !

Upvotes: 3

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

Use #main {overflow-y: scroll}

Upvotes: 2

Related Questions