Background image - Responsive issue CSS

gon250

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;
}
Refilon

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.

edited at
0

Comments

0 comments
Login to comment

Related