MyBB Community Forums

I'm trying to create a nice cat bar using multiple backgrounds, but when I try to use them only one (the first layer) shows up. I've tried every variation of the code below, with no success. Any other example works, my browser does support CSS3. I checked all of the css files and found nothing interfering. What could be wrong?

theads

thead


CSS:

.tborder {
	width: 100%;
	margin: auto auto;
}
.thead {
        background: url(images/main/theads.gif) no-repeat,	   
        url(images/main/thead.gif) repeat-x;
	padding: 0px;
        height:25px;
        font-weight: 600;
}

forumbit_depth1_cat:

<table cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr class="thead">
<td colspan="5">
<div style="text-align:center"><a  href="{$forum_url}">{$forum['name']}</a><br /><div>{$forum['description']}</div></div>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
{$sub_forums}
</tbody>
</table>
<br />

I tried background-image also. Same results.

In progress of creating my first theme by completely changing an existing one

Any help very appreciated!

Try removing the line break from the two backgrounds.

E: I just came to know that CSS3 does not support the shorthand property for multiple background images.

I have same problem, so bump this tread. I want to use 2 images as background (in .thead), but i can see only 1st one. My browser also supports CSS3, i tried many different combinations with no effect. My code is like that:

.thead {
font-size: large;
text-transform: uppercase;
font-family: Geo-Md;
color: #FFF;
background-image: url(images/PL13STYLE/rog.png), url(images/PL13STYLE/srd.png);
background-repeat: no-repeat;
background-position: 0 0, 20px 0px;
background-size: 20px 35px, 100% 35px;
border: 1px solid black;
}

Only rog.png shows up.

Try the :after or :before selector
.thead:after {
background:
}

(2013-04-11, 12:03 PM)maniacmusic Wrote: [ -> ]Try the :after or :before selector
.thead:after {
background:
}

That doesn't work too

This seems to be a bug in MyBB itself, since I'm also having this issue, and when I load up the element in firebug, the url() portion in the cached css files only have one pointing to the correct image:

#logo .header {
	background-image: url(images/logo-icon.png), url(images/logo-icon.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left center, right center;
}

Firebug brings up:

#logo .header {
    background-image: url("../../../images/logo-icon.png"), url("images/logo-icon.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
}

Edit: Seems that if I move the second url() to it's own line, the function to fix css urls in the cache files runs properly on them. ... I also changed to the 'shorthand' method of displaying multiple backgrounds..

	background: url(images/logo-icon.png) left center no-repeat,
		url(images/logo-icon.png) right center no-repeat;

gets parsed properly in the cache files..

Hey guys,

I am having this exact same issue. I tried the work-around that Sephiroth above posted, but I still get a bunch of random ellipses inserted into my URL. My code is:

#logo {
	background: url(images/earth/header.png) top left repeat-x,
url(images/earth/lightbulb.gif) left no-repeat;
	border-bottom: 1px solid #31261e;
}

But what comes out is this:

#logo {
	background: url(../../../images/earth/header.png) top left repeat-x,
url(../../../images/earth/lightbulb.gif) left no-repeat;
	border-bottom: 1px solid #31261e;
}

Any other thoughts?

So anyone have any thoughts on this?

Try this way:

#logo {
    background-image: url(images/earth/header.png), url(images/earth/lightbulb.gif);
    background-repeat: repeat-x, no-repeat;
    background-position: top left, left;
}

And this:

#logo {
    background-image: url(images/earth/header.png), 
    url(images/earth/lightbulb.gif);
    background-repeat: repeat-x, no-repeat;
    background-position: top left, left;
}

I'm having the same issue. Can't get the effect I want without CSS3 as I want the images to be displayed in a certain order. Above solution didn't work.

Might be helpful to some people to try what I tried and make a new div that wraps everything and apply the image to that.