Background issues. [fixed]

[XENO QUEEN]

x·is·tence

What I've been doing is working with multiple background layers and I'm struggling with making it work correctly.



/* border around forum */
#wrapper {background-image: url(http://i1328./w524/kiwishaped/top_zps7ef602f4.jpg~original), url(http://i1328./w524/kiwishaped/middle_zpsa0417831.jpg~original),
url(http://i1328./w524/kiwishaped/bottom_zps308b2d66.jpg~original);
background-repeat: no-repeat, repeat-y, no-repeat;
background-position: center top, center center, center bottom;
    padding: 26.3em;
}
The other issue I'm having is I stubbornly didn't want my forum in the middle of the page or on the left or right I wanted it a little off. Haha. How would I shove the forum (and not the background) to the right some? Is it possible, or shall I just add a handful of PNG pixels to the right side-that's my backup plan.

But first I want to get the bottom bit of my image border showing like the rest of it is.

Sorry if this was the wrong place to post, I looked at the other forums for the coding and couldn't decide where to put this, maybe you should have I "I don't know what the heck I'm doing" board. lol.

~Georgie ?

[RedBassett]

Greetings,

I bumped this over to themes so they can help you

[Brian]

Hi, XENO QUEEN.

Since you told the center portion of your background image to repeat, there's no limit to when it will stop repeating, so the bottom image is never shown since the middle will endlessly repeat. A good solution to this would be to use a separate element for the bottom image and add it as a background to that. You should be able to do this inside the Forum Wrapper layout template.

To move your forum around inside the background you made, you'll have to change a couple of things.

First, set your forum's width to 1024px (the width of your image). Then go to Themes > Advanced Styles & CSS > Style Sheet and remove the padding: 26.3em; portion you added towards the very bottom.

Add some new lines to the bottom of the style sheet, then copy and paste this on those new lines.

#wrapper2 { margin: 300px 40px 0 200px }

Finally, go to Structure > Layout Templates > Forum Wrapper and add this line in green directly below <div id="wrapper">:

<div id="wrapper">
<div id="wrapper2">

And add </div> directly below the line that says $[footer]:

    $[footer]
</div>
</div>

[XENO QUEEN]

Alright, I'm going to d0o all that now, I'll let you know how it goes! Thank you so much to the both of you! -beams-

[XENO QUEEN]

Alright, thank you so much. I managed to move the forum like you instructed me, but I'm feeling a little skittery about playing around with the forum wrapper layout template, mostly because I wouldn't know where to put it, how to do it so it all matches up and everything. Would you be able to assist me with this? With a tiny bit of direction? You did perfectly with the latter of the directions.

[XENO QUEEN]

Anyone? Brian I don't want to bother you, but since you were the one to tell me what I needed to do, could you perhaps direct me a little more?

I can wait, don't worry. I have the patience of a saint, I'm just editing this to make it a more reasonable post.

Do I do it in html? Where would I put it?

[Brian]

Tagging me was the right thing to do. I seldom get a chance to step outside of Support, and I usually rely on notifications to get back to threads I was in previously in other boards, so now I'm here!


Structure > Layout Templates > Forum Wrapper

Find this part of the code.

    $[footer]
</div>

And add this on a new line after it.

<div id="wrapper-foot"></div>

Themes > Advanced Styles & CSS > Style Sheet

Add this on a new line at the very bottom.

#wrapper-foot {
    background-image: url("http://i1328./w524/kiwishaped/bottom_zps308b2d66.jpg~original");
    background-position: center center;
    background-repeat: no-repeat;
    height: 251px;
    margin: 0 auto;
    width: 990px;
}

[XENO QUEEN]

OMG Brian -grabs face and plants a kiss on you- BRILLIANT, FABULOUS! -squeaks and fangirls-

Thank you SO MUCH!

[Brian]

Easy there, it's only web design.

[XENO QUEEN]

I was struggling with it for a bit and I love learning how to fix things, I'm going to be taking a course in webdesign or something-Well, whatever I can find here in New Zealand, I would love to be doing this, I help where I can but I'm still a newbie.

[Bluesonic1]

I was looking for a solution much like this one (with Xeno Queen's help too), except I'm aiming to center to forum.

Using this, for some reason that I don't understand, the padding section moves the forum down AND to the right of the top and body image, and no matter what I try I just can't get them to center! This is what I have on the forum at the moment:
/* border around forum */
#image-wrapper {background-image: url(http://i106./m259/bluesonic1/Rise%20of%20Four/head3.png~original), url(http://i106./m259/bluesonic1/Rise%20of%20Four/body.png~original);
background-repeat: no-repeat, repeat-y;
background-position: center top, center center;
   padding: 39em;
   margin: 10px;
}
[Link to forum]

I realize this thread is marked as fixed so perhaps tagging would be appropriate Brian?