0

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.

Stackedup
  • 680
  • 2
  • 9
  • 26

1 Answers1

1

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;
}
Shizon
  • 149
  • 7
  • thank you for the reply. I had actually already tried cover and now tried center as well but still no luck with it. – Stackedup Aug 27 '20 at 09:55
  • 1
    Center is for `background-position` property, cover is for `background-size` property. They are different things and you need them both. The slash between them is how css understands the separation between the `background-position` (center) and `background-size` (cover) properties. You can copy-paste those lines i gave you at the place of the ones you posted. As i said, though, those are not enought since you also need to reduce carousel height. You can copy-paste the other code i gave you inside the @media. That more clear? – Shizon Aug 27 '20 at 10:39
  • Thanks for the explanation. It really didn't solve the issue for me but I see what you are getting at. When I change these it shifts quite a few things around but I mark your solution as an answer. – Stackedup Aug 28 '20 at 00:01
  • 1
    I can assure you i tried the css on your website before telling you and it worked. Try checking why the css does not apply cause the result should be correct. Here is a screenshot: https://dumpshare.net/images/7790384Istantanea_2020_08_28_09_56_46.png – Shizon Aug 28 '20 at 07:57
  • Sure, I understand. I spent a bit more time on this. I have got it as close as possible to what I intend. I made the use of what you suggested, as well as using width, max-width, background-size as cover, background-position as percentages and display as block. – Stackedup Sep 09 '20 at 00:55