CSS for background image + semi-transparent blocks...?

User31

(Edited: to simplify)

How to:

(a) Bang an image on the main page background site wide?

(b) Change all the content blocks to varying degrees of semi-transparent black?

🙂👍Cheers!

User31

Are there any examples of CSS code for adding an image to the primary page background site-wide?

(*I tried a few random CSS code examples found online, however they didn't seem to do anything.)

ernestdefoe

I'm sure someone will help you as soon as they can. No need to constantly replying to your topic. Trust me the community here is pretty good at helping each other. Instead of multiple posts why not edit your second post to include any added info or whatever.

User31 when you say adding an image to the primary page background are you talking about in the header like you are currently trying to achieve or as the background in the body of the forum?

This isn't my area of expertise so maybe someone can help you that knows how to do this kind of stuff.

User31

Are there any examples of CSS code for changing all the content blocks to semi-transparent black?

-It doesn't need to be any specific degree of transparency, as I am able to adjust the rgba(**, **, **, 0.0—1) within CSS examples.

User31

I probably should have mentioned to begin with, that my new forum; @nzmentalhealthforum.flarum.cloud-(*which is still in the early stages of being set-up)-is currently hosted with FreeFlarum, so I don't have access to anything beyond the basics.

User31

If it would help, in reciprocation for forthcoming assistance with any or all the above, of course I am quite willing to consider either helping out in whatever ways I am able to in return, or donating to anyone who has a donation option available at their own site, or instead directly via PayPal....

User31

ernestdefoe

Indeed, I'm meaning to add a single image to the page background in the body of the forum.

(*🤔I think, at XF it was generally referred to as just: the main page background. As in; the primary background upon which everything else sits atop thereof, if that makes any sense (?))

User31

ernestdefoe

Unsure what you were meaning about the header, although assume it may be looking very differently on everything other than this Android mobile I'm using...(¿?)

Whatever the case I've now taken an abitrary 'shot into the dark' by modifying the code to; 'cover', so hopefully the issue is all sorted...(¿?)

(*...and no, I can't check for myself because for some reason the mobile Desktop view just doesn't function while on any Flarum fora...)

User31

Regarding the page background image:

-Tested several examples found on coding websites.

-Unfortunately none worked-(in the exact forms presented).

Now attempting modification.

-Here are three unsuccessful versions tested so far:

#1)

.Page-background {
background-image: "https://nzmentalhealthforum.flarum.cloud/assets/files/2024-07- 17/1721189459-574047-img-20240717-161034.jpg";
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

#2)

.Page-body {
background-image: "https://nzmentalhealthforum.flarum.cloud/assets/files/2024-07-17/1721189459-574047-img-20240717-161034.jpg";
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

#3)

.Body-background {
background-image: "https://nzmentalhealthforum.flarum.cloud/assets/files/2024-07-17/1721189459-574047-img-20240717-161034.jpg";
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

I'm probably miles off...

•EDIT: 😂 Indeed I was.

User31

Righto, had no luck with adding a background image so now trying background gradients...with varying results:

(*Note: Am unsure how to post images here, hopefully one of these 3 work...(¿?))

(*Test#1)

(*Test#2)
![https://nzmentalhealthforum.flarum.cloud/assets/files/2024-07-17/1721199035-394139-screenshot-2024-07-17-18-49-24-47-cbf47468f7ecfbd8ebcc46bf9cc626da.jpg](https://)

(*Test#3)
![]https://nzmentalhealthforum.flarum.cloud/assets/files/2024-07-17/1721199035-394139-screenshot-2024-07-17-18-49-24-47-cbf47468f7ecfbd8ebcc46bf9cc626da.jpg)

☝️😅Yeah so if at least 1 image is visible, it should present a view of a screenshot of the main forum page's discussion threads—in which the background has a black to grey gradient from left to right....yet this obviously makes it difficult to discern the text...(*the text is also coloured differently depending on the page & blocks)

*Two questions:

(i) How can the text color be made to have the same black to grey gradient but going from right to left-(*so the text contrasts with the background and thus hopefully discernable...(¿?))

(ii) How can the same background & text gradient be applied to all the different blocks & pages throughout the forum...(¿?)

User31

😄 Gotta say, whoever came up with the Flarum scrolling function at the top on mobile is a blimmin' genius!!

It's handy AF!

luceos

body {
    background-image: url("https://images.pexels.com/photos/23886068/pexels-photo-23886068/free-photo-of-fresh.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.DiscussionPage-list {
    background: transparent !important;
}

^ this ought to get your background going

For the fonts there are two options, target specific elements directly (more work) or apply one color to everything (will make text harder to distinguish in priority/context).

User31

luceos

😃Thank you sir, I'll go test this right now.

User31

luceos

Very grateful for your assistance.

•I've just finished testing the code using the included example image & then with the intended background image as well.
(Both images respectively resulted the same)

•Unsure if the result is as you'd expected...(¿?)... however it is still pretty close to what I'm aiming for.

(*Note: Mobile-Desktop view wasn't working up until yesterday, though apparently it is now...)

•Below are two sets of full page screenshots stitched together-(#1 is Mobile-Desktop view & #2 is Mobile view-(both using the example image))

(#1)

(#2)

•Mobile view doesn't seem to show the background image behind the threads/discussions.

•Mobile-Desktop view is almost working perfectly-(*if not for being so closely zoomed in)

•Is this expected?

(*Also: just to provide a bit more info)

•Below is one version of the intended background image-(which will hopefully work well with the text changed to white)

User31

luceos

•Hey I understand the voluntary community support practiced here, however I would like to (re)state my earlier proposed option for anyone who helps me; that I most certainly am very happy to reciprocate by at the least donating a little coin wherever one prefers.

•Although my initial support request isn't quite complete, you've still helped me nonetheless and therefore (in my opinion) are deserving of reciprocation.

(*Yet if not interested...😁then I'll just go donate to either FreeFlarum or Flarum instead)

User31

luceos

😄 I just realized you're like, one of the head honchos 'round here...😂 and here's me casually tryin' to bribe ya... worse still...🤣 y'all are probably going to notice my dirty little secret hidden in the footer...(😅 I'll remove it if it's not allowed)

luceos

User31 I used a different image because your original one was no longer available. Replace the link in the url("") section of the custom css to use whatever background you need.

User31

luceos

Yes sir, I actually have already done that earlier this morning.

The 2 issues are;

-the images all appear zoomed in,

-and the background images don't seem to work as expected on Mobile view. (see; example screenshots in earlier post)

Tbh I don't really know if what I'm asking is possibly too much of a hassle. I just don't know how much work could be involved.
(🤔 So it might be best I go look at the paid Flarum service thing I read someone mention earlier...)

User31

*Alrighty, I've now added: 'background: fixed;' to the bottom of the code; this appears to have resolved the zoomed in issue.

*Unfortunately the Mobile view issue is still persisting.

(Mobile view example)

(Mobile-Destop view example)

•Edit: Yeah nah, still haven't figured out how to make Mobile view > content background > transparent.

Whereas all backgrounds are transparent on Mobile-Desktop view...and it looks pretty sweet imo.... although it's taken until last night to finally sort out the content text colour.

So instead of;
*Black transparent backgrounds + unreadable black text on Desktop view ~ while simultaneously by switching to Mobile view seeing white non-transparent content backgrounds + readable black text.

Now I've got white text....🤣

Desktop view = black BGs + white text ✓
Mobile view = white BGs + white text ×

But anyways, in case it'll help someone else in the future. Here's the CSS code I used to change the post content text color from black to white.

/*JUSTOVERCLOCK'S POST-TXT-COL BEGIN*/ .Post-body { color: #fff; } /*JUSTOVERCLOCK'S POST-TXT-COL END*/
😄 Kinda comical how simple it is considering how many weeks it took me to figure out aye, lol...

•EDIT: 💥💪😎 Either I'm an idiot savant... or possibly, 'as-they-say' somewhat more akin to a broken clock....lol.
Butt-whatever-the-case-may-be.
Yes indeed, ya darn tootin'!
I alone...all by my lonesome have now successfully—entirely-accidentally sorted out the mobile view white background nuisance!

Just bang this codeknapped baby in the thing and BAM!💥 😄👍Bobs your uncle!

/*(11)SUBARIST'S MOB-BG FIX BEGIN*/ body when (@config-dark-mode = false) { --body-bg: transparent; } /*(11)SUBARIST'S MOB-BG FIX END*/

https://discuss.flarum.org/d/33824-changing-the-background-of-the-mobile-site/5