Free Mod How to make body background image fixed and main container semi-transparent

[glennrocksvb]

Having a fixed or non-moving background image while you scroll a page and see it through a semi-transparent container is a nice little effect for your site.

Add this in css_additional.css template in AdminCP or via Sitebuilder > Style > CSS Editor.

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

Important Notes:

1. Compress the image to minimize file size and not affect page load performance especially for mobile users who may be in a non-Wifi location and have limited data bandwidth. There are tons of image compressors online that can compress images without visible quality loss.
2. Set "Background Image" to none in the body_background stylevar in Style Variable Editor to avoid the default background image to be still loaded even if a custom one is specified.
3. I would set the image resolution to 1920 x 1080. Users with higher screen resolution than that will still see the entire browser screen covered with the background image because of background-size:cover in the css.

[IggyP]

this is a fun code ive used but getting into the widgets or odd places became a little trickier....i ended up having to make a "double linear gradient background" or some kinda madness but hey it works...

i put this in addition to the code glenn provided

#breadcrumbs {background: linear-gradient( rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url("images/smoke_cloud.jpg") no-repeat center fixed;
 background-size: cover;}
tr.topic-item  {background: linear-gradient( rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url("images/smoke_cloud.jpg") no-repeat center fixed;
 background-size: cover;
 }
.canvas-layout-container .canvas-widget {background:transparent;}

.pagenav-container {background: linear-gradient( rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url("images/smoke_cloud.jpg") no-repeat center fixed;
 background-size: cover;
 }
 .page1 #breadcrumbs {display:none;}

[sslife]

Can we see this one in action, please? I didn't get the idea.

[glennrocksvb]

See NumNum's site.

[glennrocksvb]

FYI. This site has changed as it moved to a different forum software.

[willie53]

This is someting i .really like it gives a lot more scope for creating unusual themes This is one i done just as a test to see how versitile it could be.

The possibilities are endless

[glennrocksvb]

The video is private.

[willie53]

opps will make it public just now

https://www.youtube.com/watch?v=9WDP3uZhsHs

New Link

[redragon29]

hello, how did you do that?

[KarlM]

Thank you - I've added this to my site and it looks awesome (as far as I'm concerned, anyway)... Yes, I will slowly convert the web to 8bit lmao

[FDA47]

Found it! Thanks a lot

[wheatcom]

Works great. Thanks.
The transparent background causes some visual issues with another mod that adds dropshadows to everything. But I'd rather have the shadows than the transparent background so I just set opacity 1 in this mod. I might work on a way to mask horizontal shadows in the other mod so I can use transparency again....
Works in vB 5.6.0.