Setting the perfect full screen background.

[vBulletin Support]

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#htmlTag {
  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:

@ media only screen and (max-width: 640px){ html { background-image: none !important; } }

Remove the space between the @ and media.

[Flash04jv]

Hmm.... But when I check mobile it looks off colored and weird in a few spots. I added the @ media code and removed the space, didn't seem to do anything.

[glennrocksvb]

I don't know where Guest got that '.fullwidth-box' CSS class in the @ media rule. That CSS class does not exist. Try replacing that with 'html'.

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

[Flash04jv]

That worked and is much better!! Thanks again Glenn!