Announcement

Collapse
No announcement yet.

Background tweaks

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Background tweaks

    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.

    Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

    vB Mods That Rock!

  • #2
    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)
    }
    Important Notes:
    1. 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.
    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.

    AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

    Comment


    • #3
      Thank you Glenn!

      Works like a champ.
      Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

      vB Mods That Rock!

      Comment


      • #4
        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 26th Mar '16, 9:14pm.

        Comment


        • #5
          like that if it makes more sense :P

          but the image bars still need to go all the way out hmm...

          Click image for larger version

Name:	fixed background test.png
Views:	1
Size:	988.9 KB
ID:	4340469

          Comment


          • #6
            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 NumNum; Sat 16th Apr '16, 4:14pm.
            Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

            vB Mods That Rock!

            Comment


            • #7
              hmm, wierd idk...i ended up converting my main style to a near full transparent with tint so it def still works....i had one trick part on a widget module tho but was able to over come with a "double background" linear gradient code...

              Comment


              • #8
                Originally posted by NumNum View Post
                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".
                5.2.1 has a bug that stops most additional.css code from working.

                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

                TalkNewsUK - My vBulletin 5.4.2 Demo - FEATURING "ROUTE BY NODE"!
                AdminAmmo - My Cloud Demo

                Comment


                • #9
                  hmm...ya def wierd...btw, is that another regression? ^^^ i know we cant quote in comments but now cant &quote 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


                  • #10
                    Originally posted by Mark.B View Post
                    5.2.1 has a bug that stops most additional.css code from working.

                    The workaround until we get a patch out, is to go through your additional.css code, and replace all double quotes with single quotes.
                    That resolved it.

                    Thanks.
                    Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

                    vB Mods That Rock!

                    Comment


                    • #11
                      Originally posted by Mark.B View Post
                      5.2.1 has a bug that stops most additional.css code from working.

                      The workaround until we get a patch out, is to go through your additional.css code, and replace all double quotes with single quotes.
                      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.

                      AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

                      Comment


                      • #12
                        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


                        • NumNum
                          NumNum commented
                          Editing a comment
                          Did you set it to transparent?

                        • StephenKay
                          StephenKay commented
                          Editing a comment
                          Yes, the transparency works on the main part of the page, but there is still a background behind the header part.

                        • StephenKay
                          StephenKay commented
                          Editing a comment
                          This does it:

                          #header {
                          background: none;
                          }

                      • #13
                        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;
                        }
                        And here is how i made the header transparent, and added an image with black transparent instead.






                        Last edited by icemanmx; Thu 7th Dec '17, 8:27pm. Reason: Added more code

                        Comment


                        • #14

                          Comment

                          Working...
                          X