Announcement

**glennrocksvb** · 03-01-2024, 02:34 PM

url('core/images/misc/imagefilename png')
repeat

I don't think Units is applicable and necessary.

**Snowhog** · 03-01-2024, 02:42 PM

That did it! Thank you!! Now to find suitable tile images to play with.

**Snowhog** · 03-01-2024, 02:57 PM

So I also found your css_additional.css way of doing this, so added this (after removing the changes to the body_background Style Variable):

Code:

body {
    background: url("core/images/misc/5025.png") no-repeat center fixed;
    background-size: cover;
}
#content {
    background-color: rgba(255,255,255,0.8); /* white with 80% transparency (adjust as needed) */
}

As the image I'm using to test; 5025.png; is a tile image (400x400), using the code above takes this single image and expands it to fill the page. Not as desirable as having it repeated as the edit to the body_background Style Variable achieves.

Would I just change no-repeat to repeat in the code above to achieve the same effect?

**glennrocksvb** · 03-01-2024, 06:44 PM

Remove the background-size and change no-repeat to repeat.

**Snowhog** · 03-01-2024, 09:20 PM

Thank you. That works except that the image is also showing in the Post Reply window.

Well, I guess your site does show your background image in that window, but the opacity (?) is such that it is very hard to notice?

**glennrocksvb** · 03-01-2024, 10:14 PM

I don't know why setting body_background stylevar also changes the CKEditor background in your forum when it is controlled by form_field_background stylevar.

**Snowhog** · 03-01-2024, 10:23 PM

I see you logged into our forum just a bit ago. I had already removed the added css code.

**Snowhog** · 03-02-2024, 06:37 AM

Originally posted by glennrocksvb View Post

Yeah, I was checking how it looked like but as you said the code ad been removed.

I've add the code back to css_additional.css for the KDE Plasma Style so you can take a look.

**glennrocksvb** · 03-02-2024, 03:10 PM

You have this code in css_additional.css template which is used on both the main site body tag as well as the CKEditor iframe body tag.

Code:

body {
    background: url("core/images/misc/5025.png") repeat center fixed;
}

That's why your CSS applies to the <body> tag of both the main page and the editor.

I thought you were just updating the body_background stylevar? Why do you have custom code in css_additional? If you just updated the body_background stylevar in the Style Variables Editor, then it would only affect the background of the main page as the CKEditor body background is controlled by a different stylevar called form_field_background.

**Snowhog** · 03-02-2024, 04:08 PM

Originally I changed the style variable, then undid that when I found your css option. I’ll check again, but there should just be the css. See post #4.

**Snowhog** · 03-02-2024, 04:38 PM

So now I have:

1) Removed the entry in css_additional.css
2) Edited body_background style variable for KDE Plasma with:
Body background image: url("core/images/misc/5025.png")
Background repeat: Repeat

This works, but the background isn't "fixed" as it is if using the css code, which I want, and what the css code provides. The css code is yours, found at https://vbmods.rocks/forum/vbulletin...mi-transparent

That css works on your site; the CKEditor is unaffected. If I use that code and leave the body_background style var unchanged (default), why am I not getting the same results as your site?

**Snowhog** · 03-03-2024, 08:35 AM

Got it working.

I did a Google search on: vbulletin make make body_background style variable image fixed

One of the results was this: Changing the Background Also Changes the Editor's Background (?) posted in 2019 on vBulletin Forums. Your reply (post #5) cited the cause and solution, which you posted in this thread here, in vbmods.rocks, in 2018.

I rewrote my css_additional.css entry (after setting Style Variable body_background in KDE Plasma back to its defaults) as follows:

Code:

body:not([class*="cke_"]):not([contenteditable]) {
    background: url("core/images/misc/5025.png") repeat center fixed;
}
#content {
    background-color: rgba(255,255,255,0.8); /* white with 80% transparency (adjust as needed) */
}

The image fills the background, is static, and CKEditor isn't affected.

Gotta love Google. Really love vbmods.rocks!

**glennrocksvb** · 03-03-2024, 11:41 PM

Glad you got it working. But if the only problem with using body_background was the background image not "fixed", then you just need to add this in css_additional.

Code:

body {
     background-attachment: fixed;
}

The body_background should have included background-attachment but since it doesn't, then you need to add the above code in css_additional. It will apply on both the body tag of the main page and the CKEditor body but since the CKEditor does not have a background image, it will not have any effect in the editor which is good.

**Snowhog** · 03-04-2024, 05:15 AM

Thank you. I’ll give that a try.

Added:

Works great. Thank you.

Announcement

URL Path for Background image in body_background style variable

URL Path for Background image in body_background style variable

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Users Viewing This Page

Latest Posts