Head/Side/Base Images Around Categories

[Katara~*]

Hello!

I've been using this CSS code in my forum to add head/base/side images to the categories. 
/* Start of head/base/side images code - Do not delete rows unless you know how LESS variables work.
For the image urls, replace the| @empty; |text with| url("http://example.com/image.png");
For the heights, replace| 0; |with the appropriate dimension and unit, example| 500px;
Do the same for the side margin; this is how much space on each side should be left to show the side image.
If the width seems incorrect, check for any plugins (such as sidebars) that are redefining the forum or wrapper width and try that value.
The code expects that the forum/wrapper width is the same as the width of the head/base images.
*/

@container_head_image_url: url("http://i39.tinypic.com/2ns5ogz.jpg");
@container_side_image_url: url("http://i39.tinypic.com/9i8nzp.jpg");
@container_base_image_url: url("http://i41.tinypic.com/mhekk4.png");

@container_head_image_height: 22px;
@container_base_image_height: 22px;

@container_side_image_margin: 22px;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.boards, html.multiplebgs .container.stats {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
padding: @container_head_image_height 0 @container_base_image_height;
}

html.multiplebgs .container.boards > div, html.multiplebgs .container.stats > div {
margin: 0 @container_side_image_margin;
}
/* END of head/base/side image code */



FORUM URL: upccc.proboards.com/



The only problem I have is that the side image repeats into the head/base images. My head/base images have rounded corners, so you can see the side image behind them. 

Does anyone have an idea to fix this?

Thank you!

[Tumbleweed]

Looking at your css and viewing what I can see of your layout it appears the head and base images are in the same container as that side image with the repeat-y so it will repeat from the top of the container on down. I know it looks the intention was to use the container_head_image_height to move the position down/up but it obviously isn't working. I tried using px instead (https://css-tricks.com/almanac/properties/b/background-position/) for the position and could only get the left to work.
You really need the head and base image outside the container that has the side image but it is frustrating because you should be able to position that background at least where it starts at the top. 

I don't know if the order of things in your style sheet would make it work different? By listing the side image first? I know when you are trying to achieve floats you some times have to put a certain div out of order. (Thinking to myself here and I may fiddle with that in a bit...lol)

The closest I could come was adding a border radius but it seems the left and right side don't act the same (at least on my test site) and since you are actually altering the container that has all the images, if you go too far you start changing the head/base images too.

But you can try it if you want but it still doesn't look perfect.  I added the radius first before your other background styles because otherwise it doesn't work, at least for me.


html.multiplebgs .container.boards, html.multiplebgs .container.stats {
border-top-left-radius: 14px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

I do think though, you need those head/base images outside the container where you have the side image.

[T.C.]

There's a plugin here that you might want to give a shot,register here first.