[DrkSnpr14]

OK, I'm working on creating my own custom skin. My problem is this; There are a lot of images that when inserted into the CSS, get doubled for other things. For example:

I want to use this image

as a category title image. When I plug it into the CSS, it comes up just fine, but unfortunately, it doubles as the background for the banner area. So, I've got this things repeating in the background behind my banner. I've been having the same problem with other parts of the forum with images being used on multiple parts.

I believe it's due to how the CSS is written, as it's got multiple parts grouped together. ie. .tablebg, tablebg2, ect... I have a theory that I can split these definitions, and have seperate images, allowing me to actually fully customize them. I haven't tried it just yet, but shouldn't this theoretically work? I'm just starting to go crazy

EDIT - Sort of answering my own posts, but parts of it have been working. I've experimented with splitting the CSS as so:

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
   background: url(http://basement.midashost.net/forums/Themes/grey/images/title-Background.jpg) #272727 repeat-x;
   color: #344152;
   padding-left: 10px;
   padding-right: 10px;
        background-position: top; 
        text-align: center;
}
.catbg2 , tr.catbg2 td
{
   background: url(images/catbg2.jpg) #A1BFD9 repeat-x;
   color: #344152;
   padding-left: 10px;
   padding-right: 10px;
}

Has become

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td
{
   background: url(http://basement.midashost.net/forums/Themes/grey/images/title-Background.jpg) #272727 repeat-x;
   color: #344152;
   padding-left: 10px;
   padding-right: 10px;
        background-position: top; 
        text-align: center;
}
.catbg2 , tr.catbg2 td
{
   background: url(images/catbg2.jpg) #A1BFD9 repeat-x;
   color: #344152;
   padding-left: 10px;
   padding-right: 10px;
}
.catbg3 , tr.catbg3 td
{
   background: url(http://basement.midashost.net/forums/Themes/grey/images/title-Background.jpg) #272727 repeat-x;
   color: #344152;
   padding-left: 10px;
   padding-right: 10px;
        background-position: top; 
        text-align: center;
}

Now I can enter seperate definitions for .catbg1 and .catbg3, which where previously grouped together. All I did was copy the definition for the two, and pasted it underneath, and removed the opposites .catbg 1 or 3 from each others definitions. It's gotten me closer, and I still have some messing around to do.

[SKETCHi]

All you have to do to stop it from tiling is add that bit into it.

background-repeat: no-repeat;

However, instead of using a static image like that, you should create an image that can be tiled. By that, I mean an endless looping image that looks fine when it is repeated .

That way, when some one with a larger or smaller resolution than your own comes to visit, the page won't look odd .