Mobile Background Size

Hey there, me again…

I hate to be asking once more but - even tho my issue was resolved this week (see link below):
https://colorlibsupport.com/t/mobile-menu-spacing-one-more-thing/#post-224915

My issue… reappeared out of the blue?
Everything was working fine but for a reason I can’t seem to put my finger on, the problem came back.
It’s beyond me. I did some changes on the website but nothing CSS related. I made sure your code addons were still there. Not sure what to think of it and it is why I am reaching once again for your kind help.

Div header:
<div id="colorlib-testimony" class="testimony-img" style="background-image: url(images/img_bg_8.jpg);" data-stellar-background-ratio="0.5">

CSS:

.testimony-img {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  position: relative; }
  .testimony-img .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: #000;
    z-index: -1;
    opacity: .5; }
	
	@media screen and (max-width: 968px){
#colorlib-testimony {
background-image: url(https://bestandfinest.com/images/img_bg_8.jpg) !important;
background-size: auto;
}
}

#colorlib-testimony {
  background-size: cover;
  z-index: 0; }

Testimonial section has a pixelated background again… on mobile but not resized desktop browser

Good morning

:slight_smile: ok, try this code instead:

@media screen and (max-width: 968px){
#colorlib-testimony {
background-image: url(“https://bestandfinest.com/images/img_bg_8.jpg”) !important;
background-size: auto !important;
}
}

we are adding just !important to the code

Almost there. Now the background repeats itself and does not ajust.

Almost there. Now the background repeats itself and does not ajust.

Good morning

Choose better, bigger image for this if we disable repeat then you will have a section that is not fully covering by the image :slight_smile:

Is there no way to make it scale and cover the space vertically? With height 100% or something?
I mean, this kinda works if I resize the picture to make it vertical but mobile doesn’t scale it so I have to make sure resolution is high enough so it works on all devices. It also means the browser needs to load a twin picture designed only for mobile ( longer loading time ).

If it’s the only way to make this work, I’ll take it and thank you but it seems odd to be that it can’t be scaled vertically

Good evenig

Ok, please try this one, but not sure if this helps :slight_smile:

@media screen and (max-width: 968px){
#colorlib-testimony {
background-image: url(“https://bestandfinest.com/images/img_bg_8.jpg”) !important;
background-size: cover !important;
}
}

Nah, cover brings back the pixelated version. What makes this happen is beyond me. I’ve had the same issue with most responsive templates I have used in the past. Your solution did work tho. It may not be the best to score high on loading speed and optimization but I’ll take a good looking website over that anyday.

Thank you!

Good morning Jet

hmmm, to be honest, this becomes misterious case :slight_smile: basically, there is nothing to cause… can you just try bigger image? more than 2000px ? it should work even without my css provided here

Like I said, it does work if I use a bigger picture but it does not scale. I settled for 1200px or something so the page doesn’t take too long to load.

Your help was appreciated even tho the scaling part remains a mystery, haha.
thank you!

uuughr :slight_smile: don’t like when the problem is not resolved :frowning:
So, what should we do now? you guys have services on the web, I don’t want to leave such website with any glitch

Well nobody will see it as a glitch since I replaced the background image with something big enough to cover the testimonials section on mobile. It really doesn’t matter to me that much if the background is fixed. At least it looks clean and not bugged as before.

Plus, desktop still displays it as it should since we applied this rule only to mobile. It’s fine by me!
It must be the cover parameter that’s bugged and somewhy stretches the image to overwhelming size.
My guess would be that it tries to cover the page’s height and not the div’s width for some reason.

Okay, buddy, in this case, let’s close this ticket here,
Feel free to open new tickets if you encounter anything unusual or if you have any question :slight_smile:

Have a good weekend