I would love to have my site look/behave like http://sedona.vbulletin.net/. The background image stays put while page is scrolled. I also would like to make the area in front of it semi-transparent as well. Also, what is the image resolution for the image in the background.
Background tweaks
Collapse
X
-
Background tweaks
adktramping ~ my happy place.
"Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.
Vote for your favorite feature requests and the bugs you want to see fixed.Tags: None -
Add this in css_additional template 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. That Sedona background is 1.3MB which is not good for performance and bandwidth 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.
👍 3 -
Thank you Glenn!
Works like a champ.adktramping ~ my happy place.
"Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.
Vote for your favorite feature requests and the bugs you want to see fixed.Comment
-
that transparent content is an interesting design...i was wondering tho, about a sort of opposite style....seems alot of people are experimenting with these fixed type backgrounds nowdays and i was curious to experiment with a design that lets the background bleed thru the category header areas, rather than the category channels which tend to have more text in them...
i tried some usual type developer tool test but was unable to get the display to change...is there a stylevar for those or anyone know how can those be styled with transparency?
edit: i just noticed...i removed the td and it seems apply the code to the header properly but still gotta get thru the content backround hmm
edit2: idk how i can try for an hour but as soon as i post here i figure it out lol....so ya i just reposted the background image code and that worked and lines up perfect and all, what do u know..Last edited by IggyP; Sat 26 Mar '16, 9:14pm.Comment
-
Is it me, or did 5.2.1 change this so it cannot be transparent?
When I upgraded it wiped out all my "additional css".Last edited by Craig; Sat 16 Apr '16, 4:14pm.adktramping ~ my happy place.
"Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.
Vote for your favorite feature requests and the bugs you want to see fixed.Comment
-
The workaround until we get a patch out, is to go through your additional.css code, and replace all double quotes with single quotes.MARK.B
vBulletin Support
------------
My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
My Unofficial vBulletin Cloud Demo: https://www.adminammo.com👍 1Comment
-
hmm...ya def wierd...btw, is that another regression? ^^^ i know we cant quote in comments but now cant "e in a quote even?? ughh....
anyway...for my case, i have 2 additional.css files...a custom one and the default file...so i thought maybe that could be why i didnt have any issue, but my custom forum icons are in the regular one and using quotes in the url code, and they still work, so there goes that theory...happy to consider myself lucky but that is odd indeed, id be pretty upset if i had to go thru like some ppl i know its thousands of lines of code that effect basic site functioning...idk how stuff that big can get overlooked dam..Comment
-
adktramping ~ my happy place.
"Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.
Vote for your favorite feature requests and the bugs you want to see fixed.Comment
-
I encountered that issue too and fixed it by doing the same workaround. Thanks for confirming that the double quote is the culprit. Hopefully there will be a patch soon.Comment
-
I tried this with a background picture, on a new installation, works great. My question is: the header still has a background from the default style, how would I hide that so the background also shows through there, and my logo is on top of it?Comment
-
Try this...
Put this code in the css_additional.css
Code:/*Static Background Image*/ body { background: url(/images/css/your-image.jpg) no-repeat center center fixed !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; }
Comment
Related Topics
Collapse
-
by DemOnstarIf I have an image as a background, what do I need to add to css_additionals.css to make everything above the background scroll over the background?
Thanks to all...........-
Channel: Support Issues & Questions
Fri 10 May '13, 9:35am -
Comment