Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2016-05-27 06:01:34

johnbrks
Member
From: Los Angeles
Registered: 2015-08-14
Posts: 137
Website

background image is not resized on gallery page

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

#2 2016-05-27 06:12:51

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,715
Website

Re: background image is not resized on gallery page


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2016-05-27 16:01:42

johnbrks
Member
From: Los Angeles
Registered: 2015-08-14
Posts: 137
Website

Re: background image is not resized on gallery page

I changed the css to page__body. It is the same. I don't see why the background is fine on the home page but not in a gallery. They both reference the same css.

Offline

#4 2016-05-27 17:19:34

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,603
Website

Re: background image is not resized on gallery page

The background looks identical on both pages. Try clearing your browser cache.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#5 2016-05-28 04:27:32

johnbrks
Member
From: Los Angeles
Registered: 2015-08-14
Posts: 137
Website

Re: background image is not resized on gallery page

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

#6 2016-05-28 08:11:58

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,715
Website

Re: background image is not resized on gallery page

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 test site, Pangolin test site

Offline

#7 2016-05-28 09:33:56

johnbrks
Member
From: Los Angeles
Registered: 2015-08-14
Posts: 137
Website

Re: background image is not resized on gallery page

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

#8 2016-05-28 09:46:21

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,715
Website

Re: background image is not resized on gallery page

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 test site, Pangolin test site

Offline

#9 2016-05-28 11:56:34

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,603
Website

Re: background image is not resized on gallery page

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#10 2016-05-28 12:39:26

johnbrks
Member
From: Los Angeles
Registered: 2015-08-14
Posts: 137
Website

Re: background image is not resized on gallery page

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.

Offline

#11 2016-05-29 10:59:09

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,603
Website

Re: background image is not resized on gallery page

johnbrks wrote:

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#12 2016-05-30 09:56:09

johnbrks
Member
From: Los Angeles
Registered: 2015-08-14
Posts: 137
Website

Re: background image is not resized on gallery page

thanks matthew.  background-size:contain fixed it on the iPad on both pages.

Offline

Board footer

Powered by FluxBB