CODEWITHSUNDEEP
javascriptjqueryhtmlcss
erip
erip

Reputation: 16935

Image stretches screen instead of fitting within div

I'm trying to make a page that fits on a single screen without any scrolling, but the CSS that defines its format that I've got isn't working.

The problem can be seen in the JSFiddle

The footer is fixed at the bottom of the screen (as it should be), but the background image (within content) extends from below the header to below the footer.

There also seems to be a problem with the background image when resizing the browser, but I'm sure that will be fixed when solving this problem.

I have the following code:

HTML: index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/main.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script>
        function diff(A, B) {
            return A.filter(function (a) {
                return B.indexOf(a) == -1;
            });
        }

        function show(shown) {
            var all = ['home', 'about', 'projects', 'contact'];
            var hide_these = diff(all, shown);
            var hidden;
            document.getElementById(shown).style.display='block';
            for(hidden in hide_these)
                document.getElementById(hide_these[hidden]).style.display='none';
            $(".sidebar").slideToggle(600);
            return false;
        }
        </script>
    </head>
    <body>
        <div id="home">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Home
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">
                <h1>Hello from Content!</h1>
            </div>
            <div class="footer">
               Hello from footer.
            </div>
        </div>

        <div id="about" style="display:none">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    About
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">                    
                <h1>Hello from Content!</h1>
            </div>
            <div class="footer">
               Hello from footer.
            </div>
        </div>

        <div id="projects" style="display:none">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Projects
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">
                <h1>Hello from Content!</h1>
            </div>
            <div class="footer">
               Hello from footer.
            </div>
        </div>

        <div id="contact" style="display:none">
            <div class="header">
                <div class="menu-btn"></div>
                <h1>
                    Contact
                </h1>
            </div>
            <div class="sidebar">
                <li><a href="#" onclick="return show('home');">Home</a></li>
                <li><a href="#" onclick="return show('about');">About</a></li>
                <li><a href="#" onclick="return show('projects');">Projects</a></li>
                <li><a href="#" onclick="return show('contact');">Contact</a></li>
            </div>
            <div class="content">                
                <h1>Hello from Content!</h1>
            </div>
            <div class="footer">
               Hello from footer.
            </div>
        </div>

        <script>
            $(function() {
                $('body').addClass('loaded');
            });

            $(".menu-btn").on("click", function(){
                $(".sidebar").slideToggle(600);
            });

            $(".header h1").delay(500).animate({"opacity": "1"}, 700);
        </script>
    </body>
</html>

CSS: main.css

    html,body {
        padding: 0;
        margin: 0;
        font-family: arial;
    }

    html, body, #home{
        width: 100%;
        height:100%;
    }
    a { 
        color: black;
    }

    a:visited { 
        text-decoration: none; 
        color: black; 
    }


    #home{
        min-height:100%;
        position:absolute;
    }

    #about, #projects, #contact{
        width: 100%;
        height:100%;
    }

    body .sidebar {
        display:block;
    }

    body.loaded .sidebar {
        display:none;
    }

    .header {
        background-color: black;
        height: 80px;
        width: 100%;
        font-family: cursive;
        text-align: center;
        color: white;
        display:flex; 
        align-items: center; 
        z-index: 1;
        position:relative;
    }

    .menu-btn {
        background-image: url("../images/menu.png");
        height: 48px;
        width: 44px;
        margin-left:50px;
    }


    .header h1 {
        opacity: 0;
        width:100%;
        margin:0;
        padding:0;
    }

    .sidebar {
        position: absolute;
        width: 200px;
        top: 80px;
        bottom: 0;
        padding-top: 10px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
        filter: alpha(opacity=50);  /* IE 5-7 */
        -moz-opacity: 0.5;          /* Netscape */
        -khtml-opacity: 0.5;        /* Safari 1.x */
        opacity: 0.5;               /* Good browsers */
    }

    .sidebar li {
        color: black;
        list-style-type: none;
        margin-top: 10px;
        width: 100%;

    }

    .sidebar li a {
        text-decoration: none;
        margin-left: 30px;
        background-color: #9da1a4;
        width: 100px; 
        padding: 8px;
        border: 1px solid silver; 
        border-radius: 5px; 
        display: block;
    }

    .sidebar li a:hover {
        background-color: #ebebeb;
    }

    .content {
        top: -80px; /* Header height */
        bottom: 30px;
        background-image:url("../images/arbor.jpeg");
        background-size: cover;
        min-height: 100%;
        min-width: 100%;
        padding-top: 80px;
        padding-bottom: 10px;
        text-align: center;
    }

    .content p {
        padding-top: -10px;
        text-align: center;
        color: black;
    }

    .footer {
        width:100%;
        height:30px;
        text-align: center;
        color: white;
        background-color: black;
        padding-top: 10px;
        bottom:0;
        left:0;
        position: absolute;
    }

    .footer a img {
        position: relative;
        top: -5px;
    }

My attempt to fix was setting the .content area from height = [30px, -80px] (i.e., from the top of the footer to the bottom of the header).

I'm brand new to CSS, so I'm sure this is very poorly formatted, so sorry in advance.

Thanks everyone, erip

Upvotes: 0

Views: 126

Answers (4)

Super Fighting Robot
Super Fighting Robot

Reputation: 158

So if I understand you properly, you want the footer to line the bottom of your content while making sure to fill the browser, no matter the size. This looks like a job for "relative" positioning! Currently your footer is set to "absolute", which is why it overlaps your background.

here's an updated fiddle with RELATIVE changes: https://jsfiddle.net/mcnn1d81/13/

 .footer {
         width:100%;
         height:30px;
         text-align: center;
         color: white;
         background-color: black;
         padding-top: 10px;
         bottom:0;
         left:0;
         position: RELATIVE;
    }
.content {
        top: 0px; /* Header height */
        bottom: 30px;
        background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
        background-size: cover;
        min-height: 100%;
        min-width: 100%;
        padding-top: 80px;
        padding-bottom: 10px;
        text-align: center;
        position:RELATIVE;
    }

I hope that helps!

EDIT: Added code to keep the content in the screen. https://jsfiddle.net/mcnn1d81/20/ This a quick, rough edit, and realize that what's written will only adhere to the content you put in it. As soon as you tell the content how big it needs to be you'll cause some wonky things to happen. If you want dynamic content (that stretches and fits the screen) you'll have to add some code to the resize function to make sure everything stays the same in the CSS. I'd add more, but I've got other things I need to get to. I hope this pushes you in the right direction!

Upvotes: 0

divy3993
divy3993

Reputation: 5810

Try this : 

body
{
   margin:0%;
   overflow:hidden;
}

Upvotes: 0

YourFriend
YourFriend

Reputation: 434

If you want to show everything on a single page without any scrolling then Give position:fixed to body. You can see the result here http://jsfiddle.net/mcnn1d81/1/ .

Upvotes: 1

Jay Patel
Jay Patel

Reputation: 5793

just update your css with this.

       html,body {
            padding: 0;
            margin: 0;
            font-family: arial;
            height:100%;
            width:100%;
            overflow:hidden;
        }

        .content {
            top: -80px; /* Header height */
            bottom: 30px;
            background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
            background-size: 100%;
            min-height: 100%;
            min-width: 100%;
            padding-top: 80px;
            padding-bottom: 10px;
            text-align: center;
            overflow:hidden;
        }

that will fix your issue

you can keep background-size : cover; for .content class. it will best option to set your background image.

Upvotes: 0

Related Questions