تغيير صورة الخلفية في جميع الصفحات

الدعم
5

لقد جربت هذا وكان هناك تفاعل غريب مع صور الخلفيات للفئات. قمت بتغييره من #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;
}

بينما يتم تعيين خلفيات الفئات ببساطة باستخدام واجهة مستخدم الفئات.