Why is my background image cut off at the bottom by my CSS?












3















I'm trying to create a page in which the background image covers it without repeating or expanding beyond the window. It is now cut off at the bottom.



I have tried using viewport sizes, percentages, and cover, but it either repeats or gets cut off and leaves almost half of the window totally white.






html, body {

    margin:0; 

    padding:0; 

    width:100%; 

    height:99vmin; 

    overflow:hidden;

}

body {

    font-family:verdana, arial, sans-serif; 

    font-size:76%;

}

#background {

    position:absolute; 

    z-index:1; 

    width:100%; 

    height:100%;

    background-image: url(https://i.imgur.com/OON2Kz3.jpg); 

    background-size: cover;

}

#quotes {

    text-decoration: none;

    padding-top: 30%;

    padding-right: 20%;

    padding-left: 20%;

    margin: auto;

    position: absolute;

    text-align: center;

    color: beige;

    font-size: 36px;

}

.button {

    position: absolute;

    z-index: 1000;

    margin: 50%;

    text-align: center;

}

<body>

    <div id="background">

        <div id="quotes">

        <p>“<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.”</p>

        <p>“Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.”</p>

        <p>“We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.”</p>

    </div>

        </div>

    <button class="button">Thus Spoke Nietzsche</button>

<script src="randomize.js"></script>

</body>








html css







share|improve this question

























  • How am I to know what code is relevant and what is not? Code interacts with all kinds of other code. Tell me a rule to follow.

    – Thomas
    Jan 3 at 16:55






  • 3





    @Thomas your issue is with html and css so we need to see both of those. Your issue pertains to your background, which means we need to see any element that you are adjusting the background property with. If you aren't sure what is relevant, I suggest going through your code line by line and ensure you know what it's doing. You may be able to find your issue.

    – Mike Diglio
    Jan 3 at 17:01











  • @MikeDiglio I changed it. I hope it is better.

    – Thomas
    Jan 3 at 17:23






  • 2





    @Thomas In order to determine whether code is relevant, start with the code you have, then remove styles/markup until your snippet no longer reproduces the error you are describing. At least half the time, this should also help you discover what the problem is on your own (which is a major reason why we require an MCVE). Sometimes you can also use deduction; e.g. for the problem you've described, any code that might change the font color or style obviously is not relevant to a background-image sizing problem, and thus should not be included in the code snippet.

    – TylerH
    Jan 3 at 19:30






  • 2





    @TylerH I will bear in mind in the future more of the principles you outlined. It was hard for me to learn any better when all I received was downvotes without explanation. Because of people like you, I can learn to get better at asking the right questions and learn what is relevant, because I do not know everything that may be relevant, since code is often unpredictable especially at an earlier stage of learning to code. I will practice narrowing down the code as you suggested.

    – Thomas
    Jan 3 at 19:56
















3















I'm trying to create a page in which the background image covers it without repeating or expanding beyond the window. It is now cut off at the bottom.



I have tried using viewport sizes, percentages, and cover, but it either repeats or gets cut off and leaves almost half of the window totally white.






html, body {

    margin:0; 

    padding:0; 

    width:100%; 

    height:99vmin; 

    overflow:hidden;

}

body {

    font-family:verdana, arial, sans-serif; 

    font-size:76%;

}

#background {

    position:absolute; 

    z-index:1; 

    width:100%; 

    height:100%;

    background-image: url(https://i.imgur.com/OON2Kz3.jpg); 

    background-size: cover;

}

#quotes {

    text-decoration: none;

    padding-top: 30%;

    padding-right: 20%;

    padding-left: 20%;

    margin: auto;

    position: absolute;

    text-align: center;

    color: beige;

    font-size: 36px;

}

.button {

    position: absolute;

    z-index: 1000;

    margin: 50%;

    text-align: center;

}

<body>

    <div id="background">

        <div id="quotes">

        <p>“<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.”</p>

        <p>“Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.”</p>

        <p>“We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.”</p>

    </div>

        </div>

    <button class="button">Thus Spoke Nietzsche</button>

<script src="randomize.js"></script>

</body>








html css







share|improve this question

























  • How am I to know what code is relevant and what is not? Code interacts with all kinds of other code. Tell me a rule to follow.

    – Thomas
    Jan 3 at 16:55






  • 3





    @Thomas your issue is with html and css so we need to see both of those. Your issue pertains to your background, which means we need to see any element that you are adjusting the background property with. If you aren't sure what is relevant, I suggest going through your code line by line and ensure you know what it's doing. You may be able to find your issue.

    – Mike Diglio
    Jan 3 at 17:01











  • @MikeDiglio I changed it. I hope it is better.

    – Thomas
    Jan 3 at 17:23






  • 2





    @Thomas In order to determine whether code is relevant, start with the code you have, then remove styles/markup until your snippet no longer reproduces the error you are describing. At least half the time, this should also help you discover what the problem is on your own (which is a major reason why we require an MCVE). Sometimes you can also use deduction; e.g. for the problem you've described, any code that might change the font color or style obviously is not relevant to a background-image sizing problem, and thus should not be included in the code snippet.

    – TylerH
    Jan 3 at 19:30






  • 2





    @TylerH I will bear in mind in the future more of the principles you outlined. It was hard for me to learn any better when all I received was downvotes without explanation. Because of people like you, I can learn to get better at asking the right questions and learn what is relevant, because I do not know everything that may be relevant, since code is often unpredictable especially at an earlier stage of learning to code. I will practice narrowing down the code as you suggested.

    – Thomas
    Jan 3 at 19:56














3












3








3








I'm trying to create a page in which the background image covers it without repeating or expanding beyond the window. It is now cut off at the bottom.



I have tried using viewport sizes, percentages, and cover, but it either repeats or gets cut off and leaves almost half of the window totally white.






html, body {

    margin:0; 

    padding:0; 

    width:100%; 

    height:99vmin; 

    overflow:hidden;

}

body {

    font-family:verdana, arial, sans-serif; 

    font-size:76%;

}

#background {

    position:absolute; 

    z-index:1; 

    width:100%; 

    height:100%;

    background-image: url(https://i.imgur.com/OON2Kz3.jpg); 

    background-size: cover;

}

#quotes {

    text-decoration: none;

    padding-top: 30%;

    padding-right: 20%;

    padding-left: 20%;

    margin: auto;

    position: absolute;

    text-align: center;

    color: beige;

    font-size: 36px;

}

.button {

    position: absolute;

    z-index: 1000;

    margin: 50%;

    text-align: center;

}

<body>

    <div id="background">

        <div id="quotes">

        <p>“<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.”</p>

        <p>“Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.”</p>

        <p>“We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.”</p>

    </div>

        </div>

    <button class="button">Thus Spoke Nietzsche</button>

<script src="randomize.js"></script>

</body>








html css







share|improve this question
















I'm trying to create a page in which the background image covers it without repeating or expanding beyond the window. It is now cut off at the bottom.



I have tried using viewport sizes, percentages, and cover, but it either repeats or gets cut off and leaves almost half of the window totally white.






html, body {

    margin:0; 

    padding:0; 

    width:100%; 

    height:99vmin; 

    overflow:hidden;

}

body {

    font-family:verdana, arial, sans-serif; 

    font-size:76%;

}

#background {

    position:absolute; 

    z-index:1; 

    width:100%; 

    height:100%;

    background-image: url(https://i.imgur.com/OON2Kz3.jpg); 

    background-size: cover;

}

#quotes {

    text-decoration: none;

    padding-top: 30%;

    padding-right: 20%;

    padding-left: 20%;

    margin: auto;

    position: absolute;

    text-align: center;

    color: beige;

    font-size: 36px;

}

.button {

    position: absolute;

    z-index: 1000;

    margin: 50%;

    text-align: center;

}

<body>

    <div id="background">

        <div id="quotes">

        <p>“<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.”</p>

        <p>“Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.”</p>

        <p>“We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.”</p>

    </div>

        </div>

    <button class="button">Thus Spoke Nietzsche</button>

<script src="randomize.js"></script>

</body>








html, body {

    margin:0; 

    padding:0; 

    width:100%; 

    height:99vmin; 

    overflow:hidden;

}

body {

    font-family:verdana, arial, sans-serif; 

    font-size:76%;

}

#background {

    position:absolute; 

    z-index:1; 

    width:100%; 

    height:100%;

    background-image: url(https://i.imgur.com/OON2Kz3.jpg); 

    background-size: cover;

}

#quotes {

    text-decoration: none;

    padding-top: 30%;

    padding-right: 20%;

    padding-left: 20%;

    margin: auto;

    position: absolute;

    text-align: center;

    color: beige;

    font-size: 36px;

}

.button {

    position: absolute;

    z-index: 1000;

    margin: 50%;

    text-align: center;

}

<body>

    <div id="background">

        <div id="quotes">

        <p>“<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.”</p>

        <p>“Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.”</p>

        <p>“We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.”</p>

    </div>

        </div>

    <button class="button">Thus Spoke Nietzsche</button>

<script src="randomize.js"></script>

</body>





html, body {

    margin:0; 

    padding:0; 

    width:100%; 

    height:99vmin; 

    overflow:hidden;

}

body {

    font-family:verdana, arial, sans-serif; 

    font-size:76%;

}

#background {

    position:absolute; 

    z-index:1; 

    width:100%; 

    height:100%;

    background-image: url(https://i.imgur.com/OON2Kz3.jpg); 

    background-size: cover;

}

#quotes {

    text-decoration: none;

    padding-top: 30%;

    padding-right: 20%;

    padding-left: 20%;

    margin: auto;

    position: absolute;

    text-align: center;

    color: beige;

    font-size: 36px;

}

.button {

    position: absolute;

    z-index: 1000;

    margin: 50%;

    text-align: center;

}

<body>

    <div id="background">

        <div id="quotes">

        <p>“<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.”</p>

        <p>“Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.”</p>

        <p>“We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.”</p>

    </div>

        </div>

    <button class="button">Thus Spoke Nietzsche</button>

<script src="randomize.js"></script>

</body>





html css




html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 19:41









TylerH

16.1k105569




16.1k105569










asked Jan 3 at 16:51









ThomasThomas

457




457













  • How am I to know what code is relevant and what is not? Code interacts with all kinds of other code. Tell me a rule to follow.

    – Thomas
    Jan 3 at 16:55






  • 3





    @Thomas your issue is with html and css so we need to see both of those. Your issue pertains to your background, which means we need to see any element that you are adjusting the background property with. If you aren't sure what is relevant, I suggest going through your code line by line and ensure you know what it's doing. You may be able to find your issue.

    – Mike Diglio
    Jan 3 at 17:01











  • @MikeDiglio I changed it. I hope it is better.

    – Thomas
    Jan 3 at 17:23






  • 2





    @Thomas In order to determine whether code is relevant, start with the code you have, then remove styles/markup until your snippet no longer reproduces the error you are describing. At least half the time, this should also help you discover what the problem is on your own (which is a major reason why we require an MCVE). Sometimes you can also use deduction; e.g. for the problem you've described, any code that might change the font color or style obviously is not relevant to a background-image sizing problem, and thus should not be included in the code snippet.

    – TylerH
    Jan 3 at 19:30






  • 2





    @TylerH I will bear in mind in the future more of the principles you outlined. It was hard for me to learn any better when all I received was downvotes without explanation. Because of people like you, I can learn to get better at asking the right questions and learn what is relevant, because I do not know everything that may be relevant, since code is often unpredictable especially at an earlier stage of learning to code. I will practice narrowing down the code as you suggested.

    – Thomas
    Jan 3 at 19:56



















  • How am I to know what code is relevant and what is not? Code interacts with all kinds of other code. Tell me a rule to follow.

    – Thomas
    Jan 3 at 16:55






  • 3





    @Thomas your issue is with html and css so we need to see both of those. Your issue pertains to your background, which means we need to see any element that you are adjusting the background property with. If you aren't sure what is relevant, I suggest going through your code line by line and ensure you know what it's doing. You may be able to find your issue.

    – Mike Diglio
    Jan 3 at 17:01











  • @MikeDiglio I changed it. I hope it is better.

    – Thomas
    Jan 3 at 17:23






  • 2





    @Thomas In order to determine whether code is relevant, start with the code you have, then remove styles/markup until your snippet no longer reproduces the error you are describing. At least half the time, this should also help you discover what the problem is on your own (which is a major reason why we require an MCVE). Sometimes you can also use deduction; e.g. for the problem you've described, any code that might change the font color or style obviously is not relevant to a background-image sizing problem, and thus should not be included in the code snippet.

    – TylerH
    Jan 3 at 19:30






  • 2





    @TylerH I will bear in mind in the future more of the principles you outlined. It was hard for me to learn any better when all I received was downvotes without explanation. Because of people like you, I can learn to get better at asking the right questions and learn what is relevant, because I do not know everything that may be relevant, since code is often unpredictable especially at an earlier stage of learning to code. I will practice narrowing down the code as you suggested.

    – Thomas
    Jan 3 at 19:56

















How am I to know what code is relevant and what is not? Code interacts with all kinds of other code. Tell me a rule to follow.

– Thomas
Jan 3 at 16:55





How am I to know what code is relevant and what is not? Code interacts with all kinds of other code. Tell me a rule to follow.

– Thomas
Jan 3 at 16:55




3




3





@Thomas your issue is with html and css so we need to see both of those. Your issue pertains to your background, which means we need to see any element that you are adjusting the background property with. If you aren't sure what is relevant, I suggest going through your code line by line and ensure you know what it's doing. You may be able to find your issue.

– Mike Diglio
Jan 3 at 17:01





@Thomas your issue is with html and css so we need to see both of those. Your issue pertains to your background, which means we need to see any element that you are adjusting the background property with. If you aren't sure what is relevant, I suggest going through your code line by line and ensure you know what it's doing. You may be able to find your issue.

– Mike Diglio
Jan 3 at 17:01













@MikeDiglio I changed it. I hope it is better.

– Thomas
Jan 3 at 17:23





@MikeDiglio I changed it. I hope it is better.

– Thomas
Jan 3 at 17:23




2




2





@Thomas In order to determine whether code is relevant, start with the code you have, then remove styles/markup until your snippet no longer reproduces the error you are describing. At least half the time, this should also help you discover what the problem is on your own (which is a major reason why we require an MCVE). Sometimes you can also use deduction; e.g. for the problem you've described, any code that might change the font color or style obviously is not relevant to a background-image sizing problem, and thus should not be included in the code snippet.

– TylerH
Jan 3 at 19:30





@Thomas In order to determine whether code is relevant, start with the code you have, then remove styles/markup until your snippet no longer reproduces the error you are describing. At least half the time, this should also help you discover what the problem is on your own (which is a major reason why we require an MCVE). Sometimes you can also use deduction; e.g. for the problem you've described, any code that might change the font color or style obviously is not relevant to a background-image sizing problem, and thus should not be included in the code snippet.

– TylerH
Jan 3 at 19:30




2




2





@TylerH I will bear in mind in the future more of the principles you outlined. It was hard for me to learn any better when all I received was downvotes without explanation. Because of people like you, I can learn to get better at asking the right questions and learn what is relevant, because I do not know everything that may be relevant, since code is often unpredictable especially at an earlier stage of learning to code. I will practice narrowing down the code as you suggested.

– Thomas
Jan 3 at 19:56





@TylerH I will bear in mind in the future more of the principles you outlined. It was hard for me to learn any better when all I received was downvotes without explanation. Because of people like you, I can learn to get better at asking the right questions and learn what is relevant, because I do not know everything that may be relevant, since code is often unpredictable especially at an earlier stage of learning to code. I will practice narrowing down the code as you suggested.

– Thomas
Jan 3 at 19:56












2 Answers
2






active

oldest

votes


















1














try this with img






#background{

  position:absolute; 

  z-index:1; 

  width:100%; 

  height:100%;

}

<body>

<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">

</body>








share|improve this answer































    -1














    If you want full image as background try - background-size: 100% 100%; or background-size: 100%;






    share|improve this answer
























    • I wish that would work, but I already tried that.

      – Thomas
      Jan 3 at 17:08












    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54026527%2fwhy-is-my-background-image-cut-off-at-the-bottom-by-my-css%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    try this with img






    #background{
    
  position:absolute; 
    
  z-index:1; 
    
  width:100%; 
    
  height:100%;
    
}

    <body>
    
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">
    
</body>








    share|improve this answer




























      1














      try this with img






      #background{
      
  position:absolute; 
      
  z-index:1; 
      
  width:100%; 
      
  height:100%;
      
}

      <body>
      
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">
      
</body>








      share|improve this answer


























        1












        1








        1







        try this with img






        #background{
        
  position:absolute; 
        
  z-index:1; 
        
  width:100%; 
        
  height:100%;
        
}

        <body>
        
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">
        
</body>








        share|improve this answer













        try this with img






        #background{
        
  position:absolute; 
        
  z-index:1; 
        
  width:100%; 
        
  height:100%;
        
}

        <body>
        
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">
        
</body>








        #background{
        
  position:absolute; 
        
  z-index:1; 
        
  width:100%; 
        
  height:100%;
        
}

        <body>
        
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">
        
</body>





        #background{
        
  position:absolute; 
        
  z-index:1; 
        
  width:100%; 
        
  height:100%;
        
}

        <body>
        
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">
        
</body>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 3 at 21:52









        Maria Fernanda SegoviaMaria Fernanda Segovia

        213




        213

























            -1














            If you want full image as background try - background-size: 100% 100%; or background-size: 100%;






            share|improve this answer
























            • I wish that would work, but I already tried that.

              – Thomas
              Jan 3 at 17:08
















            -1














            If you want full image as background try - background-size: 100% 100%; or background-size: 100%;






            share|improve this answer
























            • I wish that would work, but I already tried that.

              – Thomas
              Jan 3 at 17:08














            -1












            -1








            -1







            If you want full image as background try - background-size: 100% 100%; or background-size: 100%;






            share|improve this answer













            If you want full image as background try - background-size: 100% 100%; or background-size: 100%;







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Jan 3 at 16:56









            Veeresh HiremathVeeresh Hiremath

            252




            252













            • I wish that would work, but I already tried that.

              – Thomas
              Jan 3 at 17:08



















            • I wish that would work, but I already tried that.

              – Thomas
              Jan 3 at 17:08

















            I wish that would work, but I already tried that.

            – Thomas
            Jan 3 at 17:08





            I wish that would work, but I already tried that.

            – Thomas
            Jan 3 at 17:08


















            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54026527%2fwhy-is-my-background-image-cut-off-at-the-bottom-by-my-css%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -