Responsiveness bug with Services background


#1

Hello. The problem is when I upload a background image to the services it looks good on a desktop. But it is really ugly on any mobile. I use Quill 1.08.
The background image has no parallax effect, it just covers background of 2 first services and than it ends and there is just a black background.
Would you be so kind to tell me, how can we correct it? Thanks.


#2

Hi,

Please post a link to your website, so we can check.

Best Regards,
Csaba


#3

It is my site link


#4

Hi,

What you can do to fix is to set the background to repeat on screen-size below 1024px, so this way it will cover the whole area, please use this Custom CSS:

@media only screen and(max-width: 1024px) {
.services-area {
    background-repeat: repeat !important;
}
}

If you have a Child Theme already setup you can add the above CSS to the Child Theme’s style.css or you can use this plugin to add the CSS to the theme, so you will don’t loose it on theme updates: https://wordpress.org/plugins/simple-custom-css/

Best Regards,
Csaba


#5

Thank you, for your fast response.
I’d tried what you’ve said through css plug in and it did’t work. So I’ve just added background-repeat: repeat !important; in fp-services.php and it worked.
But it looks pretty ugly on mobile, would you be so kind to provide me with any other way to solve this?


#6

Hi,

Since the background of the services will be too long, you can try background-size: cover or upload a very long image, but the best way is to repeat the background, if you want a good quality image there, because with cover it will enlarge and may loose quality, so I told you the best option with repeat.

Best Regards,
Csaba


#7

Csaba, sorry to bother you once again, but the code with cover is already there:

.services-area {
		display: block;			    
		background: url(<?php echo $image_uri; ?>) no-repeat;
		background-position: center top;
		background-attachment: fixed;
		background-size: cover;
		z-index: -1;
                background-repeat: repeat !important;
		}

What should I change here, to make it works like you’ve said with covering, not repeating?


#8

Hi,

Please try this and let me know how it works:

@media only screen and(max-width: 1024px) {
.services-area {
    background-size: cover !important;
}
}

Best Regards,
Csaba


#9

I just made it like that, for fast checking, how it looks:

.services-area {
		display: block;			    
		background: url(<?php echo $image_uri; ?>) no-repeat;
		background-position: center top;
		background-attachment: fixed;
		background-size: cover !important;
		z-index: -1;
                }

and it worked. But you were right, it only got worse and the quality of a background worsen a lot. Sorry, for my ignorance.
You can mark this topic as resolved and thank you for your time)


#10

Hi,

Ok, You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba