Announcement

Collapse
No announcement yet.

How to change background/header into image

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

  • 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.

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


    • #3
      Originally posted by AliMadkour View Post
      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


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


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


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


            • #7
              Originally posted by Wayne Luke View Post
              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


              • #8
                Plays the Youtube video as a cover video in the header or Displays pictures in the specified folder as random cover art.
                https://www.vbulletin.org/forum/showthread.php?t=328336
                vbulletin-forum.de

                Comment

                Related Topics

                Collapse

                Working...
                X