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.
Important Notes:
Add this in css_additional.css template in AdminCP or via Sitebuilder > Style > CSS Editor.
Code:
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) */ }
- 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.
- 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.
- 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.
Comment