[jacusczolgista]

Hello,

Hope someone can help me. I use Full Frame theme on my website. Everything is great, BUT

I have an issue with the background image of the featured content

The image appears great on the laptop and on the previews for tablet and mobile, but when I actually view my website on my iphone or ipad the image doesn’t look good at all, just looks like a blurry zoomed in part of my image, not good.

Please help 🙂

[Pratik]

Hi @jacusczolgista,

Can you post in your site url so i can check it?

Regards,
Pratik

[jacusczolgista]

Hello,

yes sorry, should have done that before

jacobyrugs.co.uk

thank you 🙂

[Pratik]

Hi @jacusczolgista,

Try following code in Appearance=> Customize=> Additional CSS box:

@media screen and (max-width: 767px) {
	#featured-content {
    	background-position: center center;
    	background-repeat: repeat;
    	background-size: contain;
	}
}

Let me know how it goes.

Regards,
Pratik

[jacusczolgista]

Hello,

thank you, yes that helped 🙂
but
what’s the best way to display this image in the full background area but without having to repeat it…..is there a way of fixing it, so when scrolling the image is fixed, but the rest is scrolling, otherwise it would have to be a very high image….

[Mahesh]

@jacusczolgista: Current image is a landscape(horizontally long), so its kinda hard as desktop and mobile’s orientation is different. Do you have a portrait image of the same(vertically long)? If yes, please send me the url, and I’ll provide you the CSS.

Regards,
Mahesh

[jacusczolgista]

Hello,

what would be the ideal resolution or ratio of the image, I don’t have the same in portrait, but could get something else sorted and uploaded, but would like to get the resolution right 🙂
thank you 🙂

[Mahesh]

@jacusczolgista: I guess 490×750 works fine.

Regards,
Mahesh

[jacusczolgista]

http://jacobyrugs.co.uk/wp-content/uploads/2017/06/Persian-Rug-Cleaning-Rug-Repair.jpg

made it the size you said

thank you 🙂

[Mahesh]

@jacusczolgista: Add the following CSS:

@media screen and (max-width: 767px) {
    #featured-content {
    	background-image: url("http://jacobyrugs.co.uk/wp-content/uploads/2017/06/Persian-Rug-Cleaning-Rug-Repair.jpg");
    }
}

Regards,
Mahesh

[jacusczolgista]

did that and nothing happened, still the same image is displayed, not the new one 🙁

[Mahesh]

@jacusczolgista: I checked your site and cannot find the CSS I gave you above. Where have you put it? Let me know further.

Regards,
Mahesh

[Author]

Posts