I've exhausted all the different solutions I've come across on other platforms to resolve this issue, but I'm still unable to find a fix. So here's what I'm struggling with:
The problem I'm facing involves finding the correct combination of CSS (I believe it can be achieved using just CSS) to make square images fill the background perfectly for a website I'm developing. The square images are scans from a medium format film camera and they simply refuse to fit properly. In contrast, images from digital cameras fit without any issues. With the square images, it seems like portions of all four sides are getting cut off.
Here is the code snippet:
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel {
position: relative;
} <!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://testing.bitzer.me/kirstenleah/img/bg.jpg');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('img/bg1.jpg');"></div>
</div>
</div>
</header>You can view this in action at
Both images on the website are sized at 800x800px and are being cropped to not display the entire image.
I would greatly appreciate some guidance on how to ensure the complete image is visible in the background.