Как подружить FireFox и background-size?

Question

[Андрей Яндуганов]

Задача: наложить поверх изображения паттерн в виде мелкой сетки. В итоге получим эффект, что при масштабировании изображения сетка будет выглядеть по-разному.
Решение: для родительского элемента создаю псевдоэлемент, у которого в качестве фоновой картинки ставлю свой паттерн. Код примерно такой (внутри parallax-mirror лежит img):

.parallax-mirror::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(images/parallax-pattern.png);
    opacity: .2;
    background-size: contain;
}

Проблема: в FireFox при использовании background-size: contain; происходит следующее: во время загрузки страницы все хорошо, но как только страница полностью прогружается, паттерн пропадает, картинка становится просто слегка затемненной. В Crome, IE все нормально. Что посоветуете?
P.S. Вообще, изначально паттерн был вшит в изображения, но в таком виде они весят слишком много, поэтому такой способ наложения паттерна ради экономии.

Answer 1

[Андрей Федоров]

Принцип такой...
codepen.io/aliencash/pen/EyQyWy

Comments

[Андрей Яндуганов]

У меня паттерн немного сложнее:
#000
0#0#
00#0
0#0#
# - черный, 0 - прозрачный. Не думаю, что такое получится на градиентах сделать.

[Андрей Федоров]

Андрей Яндуганов: Да можно, было бы желание... Смотрите какие штуки люди делают lea.verou.me/css3patterns

[Андрей Яндуганов]

Андрей Федоров: Не так уж я крут, чтобы такое сотворить)

[Андрей Федоров]

Андрей Яндуганов: ну дак надо стараться. ) если вам действительно это надо...

[Андрей Яндуганов]

Андрей Федоров: Я вообще не уверен, что сгенерированный таким образом паттерн будет масштабироваться.

[Андрей Федоров]

Андрей Яндуганов: Не будет, а должен? Я так понял вы хотели чтобы они был одинаковый все время, независимо от масштаба. Хотите чтобы масштабировался вместе с фоновым изображением - используйте относительные единицы изменения.

[Андрей Яндуганов]

Андрей Федоров: Не понял, что вы имеете ввиду.

Answer 2

[trushka]

Вот вариант с масштабируемой решёткой (можно тягать textarea за уголок для ресайза)
codepen.io/anon/pen/amoEzP
Хотя, когда совсем мелко, всё равно сливается - ну, меньше физического пикселя клеточку никак не сделаешь))

Comments

[Андрей Яндуганов]

Спасибо, но больно уж странно оно масштабируется.