Change background image on all pages

Я попробовал это, и возникла странная интерференция с фоновыми изображениями категорий. Я изменил селектор с #main на body, и это сработало нормально.

Однако в обоих случаях я заметил, что элементы интерфейса легко перекрывались фоновым изображением, поэтому я установил для различных CSS-классов, используемых интерфейсом, сплошной белый фон. Но это неудобно, так как нет единого класса, который бы обрабатывал все контейнеры.

Делаю ли я что-то не так? Есть ли лучший способ установить общее фоновое изображение, которое не перекрывало бы текст и интерфейс?

Вот как я устанавливаю фон:

body {
    background-image: url(my-url);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
}

А вот как я «исправляю» интерфейс:

.container, .search-container, .reviewable, .discourse-post-event-upcoming-events, .tag-sort-options, .page-not-found, .page-not-found-topics {
    background-color: #FFFFFF;
    border: 4px;
    border-style: solid;
    border-color: #FFFFFF;
}

А фоны категорий устанавливаются просто через интерфейс категорий.