VB cloud how to change background image of your forum

[Flash04jv]

Looks like you will need to add the @ symbol back after you paste the code, before the word media, it doesn't copy and paste correctly in the code box I guess.

[Flash04jv]

I don't know if this is something that will help you, but just in case, it's another option to spruce up your page and is super easy. I do it just randomly depending on season or relative events going on in our area.

Just paste this code into CSS Editor, and add an image URL you have uploaded to a site like Imgur, Photobucket or VB File Manager, into the 2 places it says "Photo".

/*URL changes the forum photo background of outside edges*/
html {
background: url(Photo) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

[USER="3396"]media[/USER] only screen and (max-width: 640px) {html {background: url(Photo) }}

Forgot to add, you will also need to go to your Style Var Editor in Admin CP. Under > Global, change the body_background to: transparent.

You can also change Header > header_background to transparent.
And you can do Global > content_background to transparent.
And Breadcrumbs > breadcrumb_background to transparent

[Nintenex]

Weird, its being bi-polar with me, it was working at first and now it doesnt work at all.

[Nintenex]

What Size does the image need to be to fit perfectly? mine was too big

[Mark.B]

Glad you got it sorted.

[Dale D-FL]

Needs to be:

url(https://pmf.vbulletin.net/core/css/0/0/1/7/9/6//images/halloween-bats-horror-scary-red-night-header.jpg)

Mark, thank you for the input. I did it as you said and it worked like a champ. You support folks are the best.

[Mark.B]

Wayne, I followed your instructions and added what you see underlined here https://pmf.vbulletin.net/core/css/0...ght-header.jpg to the header_background of the Pink Style and clicked save but, nothing changed. Did I leave something out? Since it failed to work I cleared the URL out and will try again once you get back to me.

Needs to be:

url(https://pmf.vbulletin.net/core/css/0/0/1/7/9/6//images/halloween-bats-horror-scary-red-night-header.jpg)

[Dale D-FL]

Once you have uploaded the image to your vBCloud File Manager and received the URL, then you can add it to a background by editing the proper style variable. In the case of this thread it would be the header_background image. Go to the AdminCP and select Styles -> Style Manager.

Find the style you want to change and choose "Style Variable Editor" off the Choose Action... menu.

Scroll down to the Header group and find header_background. Click on it and its options will appear in the right part of the screen.

One of the options is Background Image. You're editing that one. You will add your URL between the double quotes so it looks like url("/your/url/here/someimage.ext")

Save at the bottom and click on Site Home Page at the top of the AdminCP to see the changes.

You'll need to repeat this for every style you want to change.

Wayne, I followed your instructions and added what you see underlined here https://pmf.vbulletin.net/core/css/0...ght-header.jpg to the header_background of the Pink Style and clicked save but, nothing changed. Did I leave something out? Since it failed to work I cleared the URL out and will try again once you get back to me.

[Mark.B]

Works here: https://forums.rabidbadger.io/index.php

Works on Joe's site too:
https://sedona.vbulletin.net/

[Wayne Luke]

Works here: https://forums.rabidbadger.io/index.php

[Nintenex]

Ill see if this works wayn when i did it before it didn't work at all.

[Wayne Luke]

Once you have uploaded the image to your vBCloud File Manager and received the URL, then you can add it to a background by editing the proper style variable. In the case of this thread it would be the header_background image. Go to the AdminCP and select Styles -> Style Manager.

Find the style you want to change and choose "Style Variable Editor" off the Choose Action... menu.

Scroll down to the Header group and find header_background. Click on it and its options will appear in the right part of the screen.

One of the options is Background Image. You're editing that one. You will add your URL between the double quotes so it looks like url("/your/url/here/someimage.ext")

Save at the bottom and click on Site Home Page at the top of the AdminCP to see the changes.

You'll need to repeat this for every style you want to change.

[Dale D-FL]

Needs to be the other way round...you need to upload your image into the file manager, then copy the URL it gives you.

When you've done this, please post back with the entire piece of code you have put into the stylevar.

Mark, after uploading the image to the file manager this is the code I received core/css/0/0/1/7/9/6//images/halloween-bats-horror-scary-red-night-header.jpg does this code look correct and does it get uploaded to Style Manager>Global>body_backgrund>upload image?

[Mark.B]

I put the image url into the first one, and i uploaded the image to Vbcloud File manger

Needs to be the other way round...you need to upload your image into the file manager, then copy the URL it gives you.

When you've done this, please post back with the entire piece of code you have put into the stylevar.

[Nintenex]

It *does* work, however for us to be able to help we need to know full details.

What is the exact code you are putting in, and which stylevar are you putting it into please?

I put the image url into the first one, and i uploaded the image to Vbcloud File manger