How to change background/header into image

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • newtalker
    New Member
    • Jan 2013
    • 6

    How to change background/header into image

    Hi,

    I would like to know how to place a header as background image so that the search option would be in front and the banner image on the background. I don't want to place a logo, rather a comple (custom) banner.

    Thanks.
  • AliMadkour
    Senior Member
    • Dec 2004
    • 1588
    • 6.X

    #2
    Edit header_bg_colore Stylevar
    AdminCP->Styles & Templates->Style Manager then choose Style Variable Editor and click go
    Search Stylevar : header_bg_color edit background and click save

    then if you want to hide logo you can easily upload a clear gif file attached
    Attached Files
    Last edited by AliMadkour; Thu 10 Jan '13, 6:43am.

    Former vBulletin Support Staff
    Need Help?, Or P.M. Me

    Comment

    • Super Cat
      Senior Member
      • Jan 2005
      • 1299
      • 4.2.X

      #3
      Originally posted by AliMadkour
      Edit header_bg_colore Stylevar
      AdminCP->Styles & Templates->Style Manager then choose Style Variable Editor and click go
      Search Stylevar : iheader_bg_color edit background and click save

      then if you want to hide logo you can easily upload a clear gif file attached
      I haven't tried recently but was it fixed where you can now add image to background. I know many styles vars don't work.

      Comment

      • newtalker
        New Member
        • Jan 2013
        • 6

        #4
        Thanks, I've tried it.

        As for the logo, it disappeared but I still can't get the banner placed. I've did what u told me, and put the banner link in the background image option but it doesn't appear.

        Comment

        • Wayne Luke
          vBulletin Technical Support Lead
          • Aug 2000
          • 73981

          #5
          Posted this in your other thread:

          There are changes to the stylevars coming in Beta 26. Please let us know if it continues to be a problem after that.

          You can set the background of the header like this:
          Code:
          #header {
              background: url("/images/vbcodex/headbg.jpg") repeat-x scroll 0 0 #E3E3E3;
          }
          All custom CSS should go in the css_additional.css template.

          This specifies an image off the root in the /images/vbcodex forum. If you use images/vbcodex in the CSS then the image needs to be in /core/images/vbcodex. Images are relative to the CSS. If you're banner is large enough or you don't want it to repeat, change repeat-x to no_repeat. If you're banner doesn't fill the entire space and you want it to, then you can use the CSS background-size property with the value set to cover like this:
          Code:
          #header {
              background: url("/images/vbcodex/headbg.jpg") repeat-x scroll 0 0 #E3E3E3;
              background-size: cover;
          }
          The background-size may not be recognized by all browsers or they may require a proprietary tag that is comparable.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment

          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73981

            #6
            Click image for larger version

Name:	vbcodex_header.png
Views:	1
Size:	139.2 KB
ID:	3691076

            That is how the above works.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API

            Comment

            • Super Cat
              Senior Member
              • Jan 2005
              • 1299
              • 4.2.X

              #7
              Originally posted by Wayne Luke
              Posted this in your other thread:

              There are changes to the stylevars coming in Beta 26. Please let us know if it continues to be a problem after that.
              Nice to hear. And Thanks for the info, looks great

              Comment

              • yilmaz
                Senior Member
                • Jan 2005
                • 133
                • 6.X

                #8
                Plays the Youtube video as a cover video in the header or Displays pictures in the specified folder as random cover art.
                vbyilmaz.com

                Comment

                Related Topics

                Collapse

                Working...