Cambiar la imagen de fondo en todas las páginas

Lo intenté y tuvo una interacción extraña con las imágenes de fondo de las categorías. Lo cambié de #main a body y funcionó bien.

Sin embargo, en ambos casos noté que los elementos de la interfaz se veían fácilmente oscurecidos por la imagen de fondo. Intenté establecer un fondo blanco sólido para varias clases CSS utilizadas por la interfaz, pero esto es engorroso, ya que no hay una única clase clara que pueda manejar todos los contenedores.

¿Estoy haciendo esto mal? ¿Hay una mejor manera de establecer una imagen de fondo general que no oscurezca el texto ni la interfaz?

Así es como estoy estableciendo el fondo:

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

y así es como estoy “arreglando” la interfaz:

.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;
}

mientras que los fondos de las categorías se establecen simplemente usando la interfaz de usuario de las categorías.

1 me gusta