background image goes "poof"

ChancyRat · April 16, 2014

I posted on another thread that my background image on one page was not showing up at all - then 5 minutes later it did show up. It turns out what caused it to poof disappear, was re-sizing the browser to even slightly smaller than a normal size. On my monitor even about 12 inches causes it to disappear. 12.3 inches or larger and it reappears and stays.

http://www.joinrats.com/Sitemap/n-jKKP4/

This behavior occurs on FF28 and Chrome 33.0xxx. On IE8 the image does not appear at all (unlike all my other galleries where the backgrounds do show up but not at the right size). Not sure if this behavior with IE8 is related.

I have checked 15 or so other galleries with unique background images and they all resize perfectly. Even a tiny window size holds on to a small image.

The background image is png, 614 x 772 px (but I have other images comparable to that size and they don't have problems).

Are there image specifications I don't know about that are required so this doesn't happen?
What should I do to have the image not go poof?

Thanks.

Allen · April 16, 2014

You're also losing the double column format in the boxes and header background.
Check all your @media CSS entries especially in your theme.

ChancyRat · April 16, 2014

Allen wrote: »

You're also losing the double column format in the boxes and header background.
Check all your @media CSS entries especially in your theme.

Ah, Allen, you are far beyond me. The site-wide CSS? I haven't touched it for months and if there are @media terms there, someone gave them to me. I would not know what to check. :cry

Allen · April 16, 2014

It's a reach for me too but I think I saw lots of @media rules in your CSS with 1024 screen size.
@media only screen and (min-width: 1024px){....
Is that about the size the backgrounds are disappearing?

ChancyRat · April 16, 2014

I think you may have hit the nail on the head

clap because the code you refer to - which is in the html block for the sitemap - is from Nicholas, it's part of the back-up program he has that generates links that provides both html and css for the sitemap. AND, it's the only piece of code that is different from all the other galleries I have that don't loose the image on re-size.

This is probably the culprit part:

/* Format a Sherlock Photography style sitemap into an indented, 2-column list */
.ss-sitemap {
  font-size: 20px;
  line-height: 1.25;
}

@media only screen and (min-width: 1024px) {
  .ss-sitemap {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

In the site-wide CSS, I'm unclear what the @media codes are for, I assumed to help users of small devices be able to view pages correctly. On my iphone, they do work right.

Maybe Nicholas could check in here and help me to figure out what code I need that will do what it needs to do for the sitemap but not affect the background image...

ChancyRat · April 16, 2014

And I think part of the code is intentionally designed to revert the 2 col to 1 if the browser size is too small.

thenickdude · April 16, 2014

It looks like there is a } missing at the end of that section, which would cause it to make the rules you have in the rest of the file only apply to screens wider than 1024px. Add a } in and it should hopefully be okay! (the @media section is only supposed to include that one .ss-sitemap block inside it)

ChancyRat · April 16, 2014

Lamah wrote: »

It looks like there is a } missing at the end of that section, which would cause it to make the rules you have in the rest of the file only apply to screens wider than 1024px. Add a } in and it should hopefully be okay! (the @media section is only supposed to include that one .ss-sitemap block inside it)

Where does the } go?
Adding it as so did not fix the problem:

@media only screen and (min-width: 1024px) {
.ss-sitemap {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}

}

ChancyRat · April 16, 2014

Wait, I'll a new gallery list with your tool and find out that way. All of my backups are missing that }, apparently.

ChancyRat · April 16, 2014

Shoot, I ran the list and I put the brace in the right place, but it's not fixing the problem.

ChancyRat · April 16, 2014

Allen asked earlier if there is CSS in my sitewide theme causing the problem, again related to the @media code ... in case that is related?

Allen · April 16, 2014

ChancyRat wrote: »

Shoot, I ran the list and I put the brace in the right place, but it's not fixing the problem.

Here's 3 in a row of your CSS. The middle @media rule is missing the } at the end.

.sm-page-widget.sm-page-widget-4475267 .ss-sitemap{font-size:18px;line-height:1.25}

@media only screen and (min-width: 1024px)[B][COLOR=Red]{[/COLOR][/B]
    .sm-page-widget.sm-page-widget-4475267 .ss-sitemap[COLOR=Yellow][B]{[/B]
[/COLOR]          -webkit-column-count:2;
          -moz-column-count:2;column-count:2[B][COLOR=Yellow]}[/COLOR]
[/B][B][COLOR=Red]}[/COLOR][/B]   [COLOR="Red"]<<<< missing closing 
[/COLOR]
.sm-page-widget.sm-page-widget-4475267 .ss-sitemap>dd>dl>dt>a{color:navy}

ChancyRat · April 16, 2014

barb

barb
Completely forgot I had 2 sitemaps.
Thank you both, Allen and Nicholas.

background image goes "poof"

Comments