XF 2.2 Добавление изображения в полоску категории подпортило CSS

[Greez]

Добавил код в extra.less, изображение появилось, но из-за него полоска категории цвет меняет. Как ни пытаюсь не выходит её вернуть.

Как сделать чтобы изображение было, но и внешний вид полосы не портился?

.block--category3 .block-header
{
        background-image: url('/images/uk.png');
        background-repeat: no-repeat;
        background-position: 100px;
}

 

[Skaiman]

.block--category3 .block-header {
    background: url('/images/uk.png') no-repeat 100px,
                linear-gradient(0deg, #edf6fd, #f6fafe);
}

 

[DimmmCom]

Добавил код в extra.less, изображение появилось, но из-за него полоска категории цвет меняет. Как ни пытаюсь не выходит её вернуть.

Как сделать чтобы изображение было, но и внешний вид полосы не портился?

.block--category3 .block-header
{
        background-image: url('/images/uk.png');
        background-repeat: no-repeat;
        background-position: 100px;
}

Посмотреть вложение 127397

Да разные варианты могут быть. Как пример использовать псевдоэлемент ::after

.block--category3 {
    .block-header {
        position: relative;
        &::after {
            content: url('/images/uk.png');
            position: absolute;
            top: 0;
            left: 8em;
        }
    }
}

Skaiman, Картинка после названия категории, и с использованием background-position: 100px; как у автора, первые 100px по горизонтали не наложит градиент.
Сори, не заметил.

 

[Skaiman]

Картинка после названия категории, и с использованием background-position: 100px; как у автора, первые 100px по горизонтали не наложит градиент.

так то наложит

там указано для картинки, но не суть :) я не стал говорить, что это не лучший вариант, есть разные, ответил конкретно на вопрос :)

да и не обязательно абсолютное позиционирование, просто после заголовка флажок, так даже лучше, по ширине заголовка