cssinspinia

Banner image doesn't resize on the mobile devices

I am using Inspinia theme and I can't get the carousel image to resize on mobile devices. The example of the page is here. The stylesheet can be seen here.

Now for the page the images are specified like:

.landing-page .header-back.one {
  background: url('../img/landing/header_one.jpg') 50% 0 no-repeat;
}
.landing-page .header-back.two {
  background: url('../img/landing/header_two.jpg') 50% 0 no-repeat;
}

The media section however, doesn't seem to have anything on how to resize:

@media (max-width: 767px) {
  .landing-page .carousel-caption,
  ...

Can someone please help? Thank you.

Solution

  • The default background-size value gets set to auto. If you want to resize the background, you have to change the property value. A value i usually recommend is cover, which makes your background cover the element automatically along its shortest axes making it fit perfectly and cuts out hidden the longest axes overflowing background. In other words, the cover property resized your background shrinking it to the smallest size that still covers its element.

    However, it is not gonna do you any good alone if you don't resize also the carousel height (since height is the shortest axes on which the background will adapt).

    In your case, inside your media query, i would rather put

    .landing-page .carousel, .header-back {
    height: 350px
}

    which can be 350px or any value you see fit.

    And of course backgrounds should be set as follows:

    .landing-page .header-back.one {
  background: url('../img/landing/header_one.jpg') no-repeat center / cover;
}
.landing-page .header-back.two {
  background: url('../img/landing/header_two.jpg') no-repeat center / cover;
}