Announcement

Collapse
No announcement yet.

Create a Centered Full Screen Background

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

  • Create a Centered Full Screen Background

    One of the popular things today is to create a background that fills the entire browser window. To do this add the following code to your css_additional.css:
    Code:
    	body { 
    
    
    	  background: url(images/misc/background-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;
    
    
    	}
    This will expand the image you choose to fill the background. It will also make it fixed so the background doesn't scroll when the rest of the page does.

    If you want to link the background to another location you can add the following code into your script tags:

    Code:
    	
    		$('body').click(function(event){
    
    	
    		    window.location = "http://adsite.com";
    
    	
    		});



    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

  • #2
    This worked great, is there a way to have the header transparent so that the full screen background also shows behind the header area?

    Comment


    • #3
      NOTE IMPORTANT

      If using this in 5.1.2A it will mess up the editor, to fix that remove "!important" , it also has the effect of making the mouseover in the editor transparent,

      Fix advised by Mark B http://www.talknewsuk.com/testvb/for...ssed-up-editor

      Comment


      • #4
        Originally posted by interfx View Post
        This worked great, is there a way to have the header transparent so that the full screen background also shows behind the header area?

        Wayne - Anyway to make a transparent background in the header area?

        Comment


        • #5
          Change these three stylevars:
          header_background: Set color to 'transparent' and erase the values in everything else. Save
          wrapper_background: Set color to 'transparent' and erase the values in everything else. Save
          header_subtabbar_background: Set color to '#fff' or the color of your choice. Erase the other values if necessary and save.

          Then in css_additional.css add the following code:
          Code:
          #content, #breadcrumbs, #notices {background-color:white !important;}
          #breadcrumbs {margin:0px; padding:12px 20px 20px;}
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud customization and demonstration site.
          vBulletin 5 Documentation - Updated every Friday. Report issues here.
          vBulletin 5 API - Full / Mobile
          I am not currently available for vB Messenger Chats.

          Comment

          Related Topics

          Collapse

          Working...
          X