Hi all,

Sorry incase I'm posting a topic that has been submitted one or more times before.

I'm using JF Calla Exteriors template (Template version 1.0 / 2013 in Joomla 3.3.6). Although the website (www.deirdreangenent.com) behaves responsive on most platforms, smart phones and tablets, it does NOT so on iPhones and iPads. Problem: Instead of reducing the size of the slideshow background-image, it is displaying the top middle section of the image.
Any suggestions to get this fixed?

Description of #jf-slideshow in template.css:

#jf-slideshow {
background-clip: border-box;
background-color: #00446D;
background-image: url(../images/banner_4d.jpg);
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
z-index: 50;
/* Width added myself in an attempt to fix the problem! */
width:100%;
}

How do you want to reduce the size of background-image? background-size property values, you can refer here.

joomfreak

Not sure if I understand your suggestion, because I do not really want to fix the size of my image.
What I would like to see happen when using an iPhone or iPad, is that my background images shrinks automatically, such that the whole image reamins visible (afyer all it works perfectly for all other smart phones and tablets, just NOT for iPhone/iPad). Please have a look at the website www.deirdreangenent.com on a PC (with Windows) to see the fulll image and compare this to what you see on an iPhone/iPad. On an iPad/iPhone you only see a small section of the image, i.e. the top middle part of the image.
Does this explanation help to come up with a possible solution?

I understand your explanation. On an iPhone/iPad, you can't see the full image fit inside the device area.

joomfreak