vBulletin Screenshot showing full width background.


CSS allows a full screen background. However it requires a little setup in vBulletin. Add this code to the css_additional.css template for your style:

HTML Code:
html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Make sure that image/bg.png points to the image that you've uploaded to your site via FTP or the vBCloud File Manager.

Note: For Cloud Users, you can edit your css_additional.css template by using the Style tab in Site Builder and clicking on CSS in the sub-tab navigation.


Then go into the Style Variable Editor (AdminCP -> Styles -> Style Manager, Click the Go button to the right of your chosen style or theme) and remove any image on the body_background style variable. Also set the body_background color to the word transparent.

Using this can impact performance on mobile devices. You can disable the background on these devices with CSS like this:
HTML Code:
@ media only screen and (max-width: 640px){ html { background-image: none !important; } }
Remove the space between the @ and media.
Attached Files