So I have website and at the footer, where I’m using a image(background) as footer.
On mobile looks gross.
But I can’t figure out why. It’s not rescaling & and the image quality is real bad on mobile.
The code is:
footer {
padding: 50px 0 30px;
background: url("../img/bg-footer.jpg") center center no-repeat;
background-size: cover;
}
.bg-footer {
position: relative;
width: 100%;
height: auto;
top: -100%;
left: 0;
z-index: 0;
overflow: hidden;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
}
.bg-footer img {
margin-left: -300px;
}