Question

I have .hrt2 div but it is background image shrink in height when I shrink browser height which I do not (I want it to fill all .hrt2 div) want so I tried to overcome this by using backgound-size:cover; but that did not solve my problem. .wrap1 is to push footer even if the body empty and that worked perfectly for that purpos.

here is my code:

html{
    padding: 0;
    margin: 0;
    height: 100% !important;
}
body{
    background-color: #ffffff !important;
}
.wrap1{
    min-height: 100vh;
}
#hrt{
    background: url(bg.jpg) no-repeat center center ;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%; 
   /* -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; */

 }
#hrt2{
     border-width:2px;
     border-style: solid;
     border-color: #141618;
    background-image: url(hear.png);
    background-repeat: no-repeat;
    /*-webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%; 
    -webkit-background-size: cover cover;
    -moz-background-size: cover cover;
    -o-background-size: cover cover;
    background-size: cover cover; */
    background-position: 0%;
    background-origin: border-box;
    background-size: cover cover;

 }
   @media screen and (max-height:730px) {
        .wrap1{
            min-height: 1000px;
        }

    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="wrap1">
  <div class="mt-3 justify-content-center">
    <p style="text-align:center; font-size:1.2em; color:#00141a;"><b>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</b>
  </p>
  </div>

    <div class="container-fluid" style="height:250px; background-color:#ededed; color: black;" id="flh">
                <div class="h-100 row">
                    <div class="col-xs-12 d-columns col-md d-flex flex-column flex-shrink-0 col-md justify-content-center align-items-center"style="border-right:1px solid black" id="hrt">
                           <div class="justify-content-center">
                             <img src="images/paypal.png" style="width:140px; height: 140px;    ">
                           </div>
                           <div class="mt-3 justify-content-center">
                            <a href=#> click here</a>
                           </div>
                    </div>
                    <div class="col-xs-12 col-md justify-content-center d-flex flex-shrink-0 flex-column  align-items-center" id="hrt2" >
                        <span class="justify-content-center">
                          <img src="images/card.png" style="width:140px; height: 140px;">
                        </span>
                        <span class="mt-3 justify-content-center">
                         <b>bbbbb cccc 000000000000</b> <br/><br> 
                         <span  style=" color:#4b8cca; "><b>ss account:</span><span style="text-align: center"> 00000000</span>
                       </span></b>
                    </div>
               </div>
            </div>
          </div>
</body>
<footer>
    <div class="containter-fluid p-2">
            <div class="containter-fluid p-5">
                    <div class="row justify-content-center">
                            <div class="col text-center" style="color:white;">
                                    Copyright &copy; 
                        </div>
                    </div>
                    </div>
</footer>

note please I am using bootstrap for my code and left CSS comments so you all can see my attempts but I do not have any other idea to solve this. would you please help me and tell me what is causing the problem an how to solve it? if it can be without changing my HTML structure.

css background shrink when height shrink but not div

0 个答案: