Forum background issue (unsure where this should go).

[asht0n91]

I have an issue with my forum background. Sorry, I am unsure where to put this post, so please move if this is the incorrect location.

Basically on my forum (CreateITUK), the background has 2x pipe lines down the side of the board. Depending on what screen resolution you're running, this interferes a lot. Is there a way (a code, or something ...) in which stops this from occurring. It seems to be working fine on 1080p, but I worry that people who may be using older machines will see this defect.

Any help is greatly appreciated.

[Alanna 🥀🖤]

I don't even see pipe lines at all on your background... however, you can fix this by creating a separate image of JUST the pipe image and setting them to stick to the sides of your forum instead of one large background image that changes based on the user's resolution.

[asht0n91]

This is where my issue is ...



I need them to centre, but to be the same for any user with a different screen resolution.

[Alanna 🥀🖤]

Using just two long graphics with JUST the blue pipes, you could use the forum's wrapper id to get what you want and have it look perfectly aligned for everyone. First you'd have to set the background color and padding for the wrapper by adding this to your Style Sheet (Admin > Themes > Advanced Styles & CSS > Style Sheet):

#wrapper { position: relative; background-color: white; padding: 20px; }
Then set your forum's background image using this image (click) by going to Admin > Themes > Colors & Theme Creator.

... after checking your forum again I see that the wrapper isn't even AROUND the forum like it should be and the header at the top is within it (no wonder that has a scroll bar). Make sure the <div id="wrapper"></div> tags around surrounding your forum content and not the header like it is currently. Have the header just above the wrapper tags and what I am explaining should work. Also remove the <div id="wrapper2"></div> you added as it is unnecessary being there is already a wrapper id that you aren't even using.

Anyways, then add <div class="wrapper-pipe1"></div> right after the opening wrapper tag and <div class="wrapper-pipe2"></div> right before the closing tag like so:

<div id="wrapper">
<div class="wrapper-pipe1"></div>

...

<div class="wrapper-pipe2"></div>
</div>

Then add this to your style sheet:

.wrapper-pipe1, .wrapper-pipe2 { background-repeat: repeat-y; height: 100%; width: 19px; }
.wrapper-pipe1 { background-image:url('http://i.imgur.com/vuxhdBZ.png'); position: absolute; top: 0; left: 0; }
.wrapper-pipe2 { background-image:url('http://i.imgur.com/TF5N1cq.png'); position: absolute; top: 0; right: 0; }
That should do it. However, being that so much of the default layout has been changed and messed with, it might take some time getting back in order.