Background image height being cropped at lower resolution views
Question
Good day to you! I know that this is a common problem and have been solved many times but really I've tried every search solutions that search engine and stackoverflow returns to me but I really can't fix this one.
The problem is that the background image is cropped when the view is in smaller device.
I have tried setting the html and the body to 100% to no avail. I have tried setting the background-size to 100% 100% to no avail. I have tried this link CSS: Full Size background image but still to no avail.
Here's the css code:
body {
background-image: url(../img/bg2.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Josefin Sans Regular;
color: white;
}
html {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0,0,0,1),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
padding-top: 25%;
}
#carHead {
text-align: center;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 45%;
background-color: #f8f8f8;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgb(0,0,0.02)
}
.carousel-item {
padding: 20px;
}
and here's the body of the html code:
<body>
<!--head nav-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-desktop"></i>
< logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Search">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
<i class="fa fa-user" aria-hidden="true"></i> Login
</button>
</form>
</div>
</div>
</nav>
<!--end of head nav-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-12">
<div id="carHead">
<h1>Example of our works</h1>
</div>
</div>
</div>
<!-- featured item carousel -->
<div id="testcar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testcar" data-slide-to="0" class="active"></li>
<li data-target="#testcar" data-slide-to="1"></li>
<li data-target="#testcar" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/w1.jpg" height="350px" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 1</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/w2.jpg" height="350px" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 2</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/w3.jpg" height="350px" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 3</h5>
<p>Use/What for</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#testcar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testcar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end of carousel-->
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/1.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/2.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/3.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/1.jpg">
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</body>
finally the output:
3 answers
solution1
0 2018-05-08 03:45:57
Try using a min-height so it will not crop from the bottom of the background image. Check the sample code given below. I have given min-height:745px in the body css tag.
body { background-image: url(https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg); background-size: cover; background-position: center; background-repeat: no-repeat; font-family: Josefin Sans Regular; color: white; min-height: 725px; } html { height: 100%; } #content { text-align: center; text-shadow: 0px 4px 3px rgba(0,0,0,1), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); padding-top: 25%; } #carHead { text-align: center; } h1 { font-weight: 700; font-size: 5em; } hr { width: 45%; background-color: #f8f8f8; border-top: 1px solid #f8f8f8; border-bottom: 1px solid rgb(0,0,0.02) } .carousel-item { padding: 20px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <body> <!--head nav--> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#"> <i class="fas fa-desktop"></i> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item "> <a class="nav-link " href="#">Contact Us</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Search"> <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"> <i class="fa fa-user" aria-hidden="true"></i> Login </button> </form> </div> </div> </nav> <!--end of head nav--> <div class="container"> <div class="row"> <div class="col-xs-12 col-lg-12"> <div id="carHead"> <h1>Example of our works</h1> </div> </div> </div> <!-- featured item carousel --> <div id="testcar" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#testcar" data-slide-to="0" class="active"></li> <li data-target="#testcar" data-slide-to="1"></li> <li data-target="#testcar" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="First slide"> <div class="carousel-caption d-none d-md-block"> <h5>Work/Template 1</h5> <p>Use/What for</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="Second slide"> <div class="carousel-caption d-none d-md-block"> <h5>Work/Template 2</h5> <p>Use/What for</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="Third slide"> <div class="carousel-caption d-none d-md-block"> <h5>Work/Template 3</h5> <p>Use/What for</p> </div> </div> </div> <a class="carousel-control-prev" href="#testcar" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#testcar" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- end of carousel--> <div class="row"> <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg"> </div> <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg"> </div> <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg"> </div> <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg"> </div> </div> </div> <script type="text/javascript" src="assets/js/jquery-3.3.1.js"></script> <script type="text/javascript" src="assets/js/bootstrap.js"></script> </body>
solution2
0 2018-05-08 04:26:18
You can use the object-fit property ( with growing support ) to have the image resize in its container. Example below:
.banner-image {
overflow: hidden;
object-fit: contain;
height: 100%;
width: 100%;
max-height: 460px;
}
solution3
0 2018-05-09 05:22:35
The solution I found out for this is removing the 100% set height for both the body and the html. The background displays fine in the mobile view but on tablet devices, the background image will scale on the content inside the body as long as you have a high resolution background image (eg 6k x 4K reso).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS background image height automatically getting cropped
Background Image being cropped in Internet Explorer
Image in the background get cropped off when screen resolution size is less
background image getting cropped. Not able to set height=100%
Prevent animated background image in pseudo ::before element from being cropped
Insert image into HTML to be height-cropped
Save cropped image in different width and height
Getting image width and height of an image being used as a CSS background
CSS Image Scaling without being Cropped
how to get image to resize instead of being cropped
Related Tags