1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 How to use multiple images in the header/logo bar

Discussion in 'Styling and Customization Questions' started by Mycologist, Aug 16, 2013.

  1. Mycologist

    Mycologist Member

    Hello,

    Just started working with 1.2 and I've been having some trouble getting multiple images to work in the header bar. I know it has something to do with the #header tag as I can get one of these at a time to work. Any suggestions would be greatly appreciated, I'm definitely a novice when it comes to CSS.

    Code:
    #header
    {
        background: url(...) no-repeat top left;
    min-height: 80px;
    margin: 0;
    padding: 0;
       
    }
    
    #header
    {
    background: url(...) repeat-y top left;
    min-height: 80px;
    margin: 0;
    padding: 0;
    }
    
    #header  {
    background: url(...) repeat-y top right;
    min-height: 80px;
    margin: 0;
    padding: 0;
    }
    
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    Yeah that won't work, unfortunately.

    The easiest way is to probably use an image editing program and make the three images into one image and use that as the background image.

    You can also edit the template and you can use the images inline in HTML like:

    Code:
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
    EDIT: JulianD's response below is also correct
     
    Mycologist likes this.
  3. JulianD

    JulianD Well-Known Member

    Are you trying to implement multiple backgrounds? If that is the case, the correct syntax is:

    Code:
    #example1 {
    width: 500px;
    height: 250px;
    background-image: url(sheep.png), url(betweengrassandsky.png);
    background-position: center bottom, left top;
    background-repeat: no-repeat;
    }
    Source: http://www.css3.info/preview/multiple-backgrounds/
     
    Mycologist and Chris D like this.
  4. Mycologist

    Mycologist Member

    Awesome, just what I was looking for! Still it seems like only the first one is applying properly... the repeat-y's at the edge of the screen don't work.
    Can't think of what would be causing it. Would having the background set in Style Properties mess with it at all?

    I'll give the HTML inline a shot next if I don't have any success, thanks to both of you.

    New code:

    Code:
    #header {
    min-height: 80px;
    background-image: url(...), url(...), url(...);
    background-position: left top, left top, right top;
    background-repeat: no-repeat, repeat-y, repeat-y;
    }
    
     

Share This Page