I'm using bootstrap
and I have a background image. It was set by CSS to implement basically a kind of parallax. Everything is ok, but the image dimension is 4066 x 4066
so I set the size as background-size: 36%
. The problem is with the responsive view: on a phone it looks so small. Any idea how to fix this issue?
You can take a look my code below:
#home{
background-size: 36% !important;
background-position: 50% 26% !important;
background: url('/assets/img/light_green2_home.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
display: block;
position: relative;
height: 520px;
}
You can use (for screens smaller than 600px):
@media all and (max-width: 600px) {
#home{
background-size: 50% !important;
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments