Gray line appearing around the background div
I have one div that is 100% of the page width and height.
I set the background of the div to an animated gif and made the background change height with the height of the div (which is 100% higher than the page height). The background image is repeated horizontally and positioned at the bottom of the page.
HTML / CSS
Run this snippet in Chrome, make it full screen and then resize the window until the line appears.
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto 65%;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
The problem is that a gray horizontal thin line appears over the background image. The background of the page is the same color as the top of the image, so I don't know where the line is coming from. When the browser height (Google Chrome) is very small, the line disappears. This issue does not occur in Safari.
As you can see in the screenshot above, the repeating background image is located at the bottom. There are no vertical collaterals between each repeated image, but there is one horizontal line that crosses all of them. I checked the image and the line is not there, it is generated by the browser. How do I get rid of this line? I have looked at other posts on this issue, but none of the fixes work.
Here's the background image:
source to share
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
Use this
background-size: auto;
instead
background-size: auto 65%;
source to share
@media
workaround
This error appears only at high view heights. Fortunately, it is not that important to scale the image down after a certain height. With this in mind, we can only use queries @media
to apply scaling background-size
if the height of the viewports is under a certain size:
@media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
Working example
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-position: bottom;
z-index: 1000;
}
@media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
<div class="bottomAnim"></div>
source to share