5 replies [Last post]
Oziti
Oziti's picture
Offline
newbie
Rockingham
Last seen: 5 years 5 weeks ago
Rockingham
Timezone: GMT+8
Joined: 2014-12-16
Posts: 2
Points: 3

Hi there,

My pages (lets say this one - http://oziti.com.au/search-engine-optimisation-sem-ppc ) are having a problem in the updated firefox with the css property background-size: contain;
You can see the difference if you load the page in chrome. Any help in resolving this will be highly appreciated.

Cheers

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 18 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Try prefix

try this maybe , not 100% sure but,

if you have the following line of code :

background-size:contain;

now above that you could add the following line :

-moz-background-size:contain;

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 18 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

showing us some code would really help though

if you could show us some code it would really be helpful though . i mean just the snippet or part that is giving you trouble.

Oziti
Oziti's picture
Offline
newbie
Rockingham
Last seen: 5 years 5 weeks ago
Rockingham
Timezone: GMT+8
Joined: 2014-12-16
Posts: 2
Points: 3

prefix doesn't work, here's the code. Thanks :)

Thanks. I've already tried -moz-background-size but that didn't make any difference.

I am not sure how to edit my post so I'll share the code here:

<div class="herobg" style="height: 254px;"></div>

.herobg {
    background-image: url("http://oziti.com.au/wp-content/themes/oz2014/images/hero-bg.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    background-size: contain;
    height: 527px;
    position: absolute;
    text-align: center;
    width: 100%;
}

If you use firebug, just disable the background-size rule and you'll be able to see how background is back.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 18 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

if u have some time read though any of these threads :

background-size-cover-bug

size-cover-on-firefox

firefox-ignores-background-size-css

css3-background-size-firefox-bug-not-working-but-visible-in-firebug-firefox-3

if its irrelevant , Than you might have to wait till somebody comes along to answer you .

in a bit of a hurry , so can't debug , if i get the tym i will .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 35 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

A couple of things

You have a stray closing tag prior to the empty (bad idea) .herobg div, and some other errors. There are also css errors. Always validate your markup and css before trying to debug.

Somebody has sold you a bill of goods on minimizing your source code. It has little or no benefit and makes maintenance and debugging damned near impossible. Don't do it. Make your source be well formatted for ease of reading by human beings.

Fix your errors. That may even fix your problem. If it doesn't, reformat your code so that it's readable. Then, we can try again.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.