Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
my background images resizes correctly (i.e., scaled to fit screen) on my computer.
on my iPad, the background is correctly scaled on my home page, but if i click on a gallery, the background image is not rescaled to fit the screen and rather displays full size.
on my iPhone 6s Plus, the background is not scaled at all (even on the home page).
my custom css includes:
body {
background: url(/backlight/custom/images/splashSofa.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
site is www.joliverbrooks.com
Offline
see this post on similar topic:
http://community.theturninggate.net/vie … 934#p37934
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
The background looks identical on both pages. Try clearing your browser cache.
Offline
i tried it on two different iPads. the image is fit to the screen here:
http://www.joliverbrooks.com
But it is enlarged and not fit to the screen here:
http://www.joliverbrooks.com/galleries/ … teraction/
i only have one custom css file.
Offline
The background is fixed when looking at your site on the desktop. It scrolls (for tall pages) when looking at your site on the iPad.
I wonder if you need some css just for mobile. I see you're using the .page__mobile class in your custom css. (I'm guessing this class is added with jQuery for mobile devices as I don't see it in the main style sheet.)
Anyway, try adding background-attachment: fixed;to the .page__mobile class. See what happens.
This is just a guess....
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
background-attachment: fixed didn't change things. it still fails to size the background image on the album page.
my confusion is that the background image displays as i want on my home page (sized to fit iPad screen), but then with the same css the background image is not resized to the screen on a gallery page.
i would think the css would work the same on the home page as the gallery page, right?
Offline
well, your home page has only two rows of thumbnails so doesn't need to scroll. That other page has many rows so the image is stretched to cover the background of the entire page.
i would think the css would work the same on the home page as the gallery page, right?
It might be. Try adding a lot more images to the home page gallery and see what happens when the page has to scroll.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
The background-attachment:fixed property has some issues on iOS, largely due to how the mobile browser renders the page differently to a desktop browser. You might try making clever use of media queries to experiment with alternate implementations, something like this:
.page__body {
background: desktop-image.jpg and properties;
}
@media only screen and (max-width: 1024px) {
.page__body {
background: none;
}
body {
background: mobile properties;
}
}Mind the breakpoint value matches your configuration.
So I'd first try using the background on the body element on mobile only, just to see what happens. If that doesn't work, then you might just need to provide an alternate type of thing for the background on mobile. Like putting the image at the top, allowing it to scroll, and fading the bottom into the page background-color. Don't get hung up on trying to have the exact same thing in both places. Rather, focus on providing a consistent experience.
Offline
Offline
thanks. i'll try that. i don't mind if it isn't the same as the desktop. i don't understand why, using the same css, the home page is different from the album page.
Because, for whatever reason, iOS Safari doesn't handle background-attachment:fixed in the same way as a desktop browser, and you've set background-size:cover, so the image is being stretched top-to-bottom because of the larger number of rows in your gallery. The pages are behaving exactly as you have them coded.
To begin, try changing to background-size:contain instead. That should give you more consistent behavior for the background-image, and you can work forward from there.
Offline