Background images on iPhone
Permalink Browser Info Environment
After creating the site the images I use in a content block background do not scale down when viewed on iPhones.
I have tested it with various images and slide scale settings but no change.
Can anyone help?
I have tested it with various images and slide scale settings but no change.
Can anyone help?
| Type: | Discussion |
|---|---|
| Status: | In Progress |
The images are actually slightly smaller than the 1440 x 900 but i have tested with the suggested resolution and the same issue occurs.
the site is -
http://joannawrightphotography.co.uk/...
the site is -
http://joannawrightphotography.co.uk/...
Hi,
can you try adding the following code? You need to go to Dashboard -> Themes -> Long Story Short Parallax -> Customize. Then add the code to the "add your CSS" area:
This should help with slides that are not full-height (such as the 3rd slide).
As for full-height slides (such as the 1st slide), background images will be resized to always fill the whole browser window. Obviously, if the image is not the same size as the broswer window, a part of the image will be cut off.
Quoting from the documentation:
"By default, background images are meant to cover the whole slide area, so they might be cut off depending on the screen resolution (there are lots of screen resolutions and it's impossible to get the background to fit the same way on all computer screens)."
I have attached an image with a simulation of why the first image is being cut off. You see, if you made it any smaller, the image would not fill the full height of the slide.
If you check the demo site, background images are also cut off.
So, for the first slide, you may want to consider:
A. Using a centered "hero-style" image, that can be cropped vertically and horizontally without losing the center of interest.
B. Not making the first slide full-height.
Please let me know if you have any further questions,
Jordi
can you try adding the following code? You need to go to Dashboard -> Themes -> Long Story Short Parallax -> Customize. Then add the code to the "add your CSS" area:
@media (max-width: 979px) { .parallax-backgrounds .slides-container > div.ccm-block-styles { background-attachment: scroll !important; background-position: center top !important; } }
This should help with slides that are not full-height (such as the 3rd slide).
As for full-height slides (such as the 1st slide), background images will be resized to always fill the whole browser window. Obviously, if the image is not the same size as the broswer window, a part of the image will be cut off.
Quoting from the documentation:
"By default, background images are meant to cover the whole slide area, so they might be cut off depending on the screen resolution (there are lots of screen resolutions and it's impossible to get the background to fit the same way on all computer screens)."
I have attached an image with a simulation of why the first image is being cut off. You see, if you made it any smaller, the image would not fill the full height of the slide.
If you check the demo site, background images are also cut off.
So, for the first slide, you may want to consider:
A. Using a centered "hero-style" image, that can be cropped vertically and horizontally without losing the center of interest.
B. Not making the first slide full-height.
Please let me know if you have any further questions,
Jordi
Thanks for the speedy reply but the examples you sent are what I am trying to achieve.
Attached are screen grabs of what i am actually getting - it appears to be cropping a lot in both the vertical and the horizontal.
It happens on every device I have tested but does not happen from your own demo site, the vertical sizing is correct and only the sides have been cropped.
Any suggestions?
Attached are screen grabs of what i am actually getting - it appears to be cropping a lot in both the vertical and the horizontal.
It happens on every device I have tested but does not happen from your own demo site, the vertical sizing is correct and only the sides have been cropped.
Any suggestions?
Hi,
have you tried adding the code I mentioned in my previous reply? It should force the background to scale correctly.
Jordi
have you tried adding the code I mentioned in my previous reply? It should force the background to scale correctly.
Jordi
could you provide a link so I can have a look?
Maybe you're already aware of this, but there's also a section on the documentation that may be of help: "How to prevent background images from being cut off?"
https://www.concrete5.org/marketplace/themes/long-story-short-parall...
Regards,
Jordi