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

[Mycologist]

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.

#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;
}

 

[Chris D]

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:

<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />

EDIT: JulianD's response below is also correct

 

[JulianD]

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

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

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

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

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:

#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;
}