CODEWITHSUNDEEP
csstwitter-bootstrap-3responsive-design
gon250
gon250

Reputation: 3545

Background image - Responsive issue CSS

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

Upvotes: 1

Views: 59

Answers (2)

Brendonwbrown
Brendonwbrown

Reputation: 39

You are on the right track for implementing a responsive background image. Consider using max-width on a media query set to adjust the background-size: "some percentage". I recommend using background-size:cover for the original image, which will ensure that your image fills the element without overlaps or "underlaps".

#home {
  background-size: cover;
}

@media all and (max-width: "some number"px) {
  #home {
    background-size: 60%;
  }
}

Some reading about CSS Media Queries here.

I would recommend against targeting a specific device size, but rather, set the max-width to the point when it just starts looking too small.

Upvotes: 1

Refilon
Refilon

Reputation: 3489

You can use (for screens smaller than 600px):

@media all and (max-width: 600px) {

     #home{
       background-size: 50% !important;
    }

}

Upvotes: 1

Related Questions