About those multi layered backgrounds

[queenfoxy]

Forum URL: ourfantasycastle.freeforums.net/

I love multilayered backgrounds and would love to learn anew how to make them here on ProBoards.  I thought it might be helpful if you could see the code we used and what the final bacground looked like.  

Here is the code for my 5 layer background:
http://i90./k268/QueenFoxy_2006/Backgrounds/PhoenixNest1.gif?t=1343317206); BORDER-BOTTOM: 5px; TEXT-ALIGN: center; BORDER-LEFT: 5px; PADDING-BOTTOM: 35px; PADDING-LEFT: 35px; PADDING-RIGHT: 35px; BORDER-TOP: 5px; BORDER-RIGHT: 5px; PADDING-TOP: 35px">

http://i90./k268/QueenFoxy_2006/Backgrounds/PhoenixNest2.gif?t=1343317206) white; BORDER-TOP: 3px; BORDER-RIGHT: 3px; PADDING-TOP: 12px">

http://i90./k268/QueenFoxy_2006/Backgrounds/PhoenixNest1.gif?t=1343317206);BORDER-BOTTOM: 3px; TEXT-ALIGN: center; BORDER-LEFT: 3px; PADDING-BOTTOM: 35px; PADDING-LEFT: 35px; PADDING-RIGHT: 35px; BORDER-TOP: 3px; BORDER-RIGHT: 3px; PADDING-TOP: 35px">

http://i90./k268/QueenFoxy_2006/Backgrounds/PhoenixNest2.gif?t=1343317206); BORDER-BOTTOM: 2px; TEXT-ALIGN: center; BORDER-LEFT: 2px; PADDING-BOTTOM: 12px; PADDING-LEFT: 12px; PADDING-RIGHT: 12px; BORDER-TOP: 2px; BORDER-RIGHT: 2px; PADDING-TOP: 12px">

http://i90./k268/QueenFoxy_2006/Backgrounds/PhoenixNest1.gif?t=1343317206); BORDER-BOTTOM: 2px; TEXT-ALIGN: center; BORDER-LEFT: 2px; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; COLOR: black; BORDER-TOP: 2px; BORDER-RIGHT: 2px; PADDING-TOP: 10px">

[Brian]

Hi, queenfoxy.

That looks like a series of div elements stacked together rather than an element with multiple backgrounds. Either way, my post in the other thread provides the CSS necessary to add multiple backgrounds to a single element.

support.proboards.com/post/7042482/thread

[queenfoxy]

Hi Brian.  I guess my question is how do we get the differerent widths for the multiple backgrounds?  For design purposes, the backgrounds need to be of different widths.  Sometimes just a narrow sliver of gold or metallic showing is strikingly beautiful.  

[Brian]

I'm not sure I understand the question. Background images are usually at the size that you designed them to be. Do you have an example of what you're trying to accomplish?

[queenfoxy]

Yes, Brian, in the layered background I posted above, but less the image of the Phoenix and the one beow  I would like to make a skin with 3 or 4 layers.  The first layer (bottom) might be a patterned Christmas print that would likely be 35px wide, the second layer (middle) would be a shiny gold and probably 5 to 12 px wide.  The third layer could be a solid bright red and much more narrow than the first, outside layer.   All those widths would be adjustable per taste.  

[queenfoxy]

Hi Brian, I would like to try working with this, using your code below, but I cannot find where to put it?  Cannot find the  body tag.  Can you help me out here?  

I need to learn something about this so I can at least ask intelligent questions.  It is very hard to start over and have to relearn everything.  You guys have done so much to help me get to where I am and I thank you so much

Sep 19, 2017 at 12:08pm Brian Ordonez said:


You can actually apply multiple background images to the body of the page if you have a comma-separated list of background image URLs.


body {

background-image: url(URL TO IMAGE), url(URL TO IMAGE), url(URL TO IMAGE);

}



You can also do the same for any other CSS properties and it will affect the backgrounds in the same order you specified them. Or you can specify a single value for a background property and it will apply to all three images.


body {

background-image: url(URL TO IMAGE), url(URL TO IMAGE), url(URL TO IMAGE);

background-position: top left, top center, top right;

background-repeat: no-repeat;

}

[Tumbleweed]

queenfoxy ,

You can just add that to the bottom of your style sheet and that will over-ride the body style that is in the upper part of the style sheet.

But from your example, I don't think what Brian gave you will work since what you are wanting is like a picture frame.  Unless I'm misunderstanding, you want your forum wrapped more like this? (excuse the clashing colors, etc. as I threw this together for an example) I have three background images there, the body background and then the wrapper with an image, another div with an image and the last divide with a color but could also be an image. The three divides wrap around the forum.  

But I'll let Brian get back to you because he is way more code savvy than I am. (I actually did first attempt to do what Brian said before I answered Beckea in that other thread but controlling  the width of the middle image was a problem so I went a different route, which is yet different than what I have in the test site I posted.)

[queenfoxy]

Oh WOW!!  That is fabulous, Tumbleweed.  Can I please have that code to work with?   I think that is exactly what my little heart desires this morning.  

When Brian comes on, he may well have some tips to offer or a different way to get there, But this gives me a starting place.  Thank you so much.  You guys make ProBoards a very special place for us.

Thank you for all your help.

I do have a question though.  When I have designed something, like this board, am I allowed to put my name on it and if so, how do I do it.

[queenfoxy]

Ok guys.  I put in the code exactly as I posted it above.  I got this error message:  Syntax Error on line 1600.

This is the problem.  I know what I want to do but do not know the correct language for ProBoards

This is what I posted at the bottom of my Style Sheet:

http://i90./k268/QueenFoxy_2006/Backgrounds/AprilFool1_1.gif); BORDER-BOTTOM: 5px; TEXT-ALIGN: center; BORDER-LEFT: 5px; PADDING-BOTTOM: 35px; PADDING-LEFT: 35px; PADDING-RIGHT: 35px; BORDER-TOP: 5px; BORDER-RIGHT: 5px; PADDING-TOP: 35px">



http://i90./k268/QueenFoxy_2006/Backgrounds/AprilFool2Shimmer_1.gif) white; BORDER-TOP: 3px; BORDER-RIGHT: 3px; PADDING-TOP: 12px">



http://i90./k268/QueenFoxy_2006/Backgrounds/AprilFool3.gif);BORDER-BOTTOM: 3px; TEXT-ALIGN: center; BORDER-LEFT: 3px; PADDING-BOTTOM: 35px; PADDING-LEFT: 35px; PADDING-RIGHT: 35px; BORDER-TOP: 3px; BORDER-RIGHT: 3px; PADDING-TOP: 35px">



http://i90./k268/QueenFoxy_2006/Backgrounds/AprilFool2Shimmer_1.gif); BORDER-BOTTOM: 2px; TEXT-ALIGN: center; BORDER-LEFT: 2px; PADDING-BOTTOM: 12px; PADDING-LEFT: 12px; PADDING-RIGHT: 12px; BORDER-TOP: 2px; BORDER-RIGHT: 2px; PADDING-TOP: 12px">



http://i90./k268/QueenFoxy_2006/Backgrounds/Pastel%20Swirl.jpg); BORDER-BOTTOM: 2px; TEXT-ALIGN: center; BORDER-LEFT: 2px; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; COLOR: black; BORDER-TOP: 2px; BORDER-RIGHT: 2px; PADDING-TOP: 10px">

[Beckea]

queenfoxy ,

You can just add that to the bottom of your style sheet and that will over-ride the body style that is in the upper part of the style sheet.

But from your example, I don't think what Brian gave you will work since what you are wanting is like a picture frame.  Unless I'm misunderstanding, you want your forum wrapped more like this? (excuse the clashing colors, etc. as I threw this together for an example) I have three background images there, the body background and then the wrapper with an image, another div with an image and the last divide with a color but could also be an image. The three divides wrap around the forum.  

But I'll let Brian get back to you because he is way more code-savvy than I am. (I actually did first attempt to do what Brian said before I answered Beckea in that other thread but controlling the width of the middle image was a problem so I went a different route, which is yet different than what I have on the test site I posted.)

Not intruding I hope, but that is the way I would like some of my skins -- but I think yes the example given is the way I would like it. 
Thank you, queenfoxy, for posting more detail on what we both want. I am assuming anyway.

Thank you all others for your help!

[Beckea]

Ok, guys.  I put in the code exactly as I posted it above.  I got this error message:  Syntax Error on line 1600.

This is the problem.  I know what I want to do but do not know the correct language for ProBoards

This is what I posted at the bottom of my Style Sheet:

http://i90./k268/QueenFoxy_2006/Backgrounds/AprilFool1_1.gif); BORDER-BOTTOM: 5px; TEXT-ALIGN: center; BORDER-LEFT: 5px; PADDING-BOTTOM: 35px; PADDING-LEFT: 35px; PADDING-RIGHT: 35px; BORDER-TOP: 5px; BORDER-RIGHT: 5px; PADDING-TOP: 35px">



http://i90./k268/QueenFoxy_2006/Backgrounds/AprilFool2Shimmer_1.gif) white; BORDER-TOP: 3px; BORDER-RIGHT: 3px; PADDING-TOP: 12px">



http://i90./k268/QueenFoxy_2006/Backgrounds/AprilFool3.gif);BORDER-BOTTOM: 3px; TEXT-ALIGN: center; BORDER-LEFT: 3px; PADDING-BOTTOM: 35px; PADDING-LEFT: 35px; PADDING-RIGHT: 35px; BORDER-TOP: 3px; BORDER-RIGHT: 3px; PADDING-TOP: 35px">



http://i90./k268/QueenFoxy_2006/Backgrounds/AprilFool2Shimmer_1.gif); BORDER-BOTTOM: 2px; TEXT-ALIGN: center; BORDER-LEFT: 2px; PADDING-BOTTOM: 12px; PADDING-LEFT: 12px; PADDING-RIGHT: 12px; BORDER-TOP: 2px; BORDER-RIGHT: 2px; PADDING-TOP: 12px">



http://i90./k268/QueenFoxy_2006/Backgrounds/Pastel%20Swirl.jpg); BORDER-BOTTOM: 2px; TEXT-ALIGN: center; BORDER-LEFT: 2px; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; COLOR: black; BORDER-TOP: 2px; BORDER-RIGHT: 2px; PADDING-TOP: 10px">

queenfoxy we just need to see what Tumbleweed did because that is what we both want, right? That is exactly right what I want anyway. 

[queenfoxy]

Hi Beckea.  I am so glad you chimed in.  We can learn together.  I have made so many skins/themes and it is really frustrating to not be able to do it at ProBoards.  

YES!!  YES!!  YES!!  We need the code that Tumbleweed used.  That appears to be exactly what we are both looking for.  I have not found anything like that in all the skins I have looked at at ProBoards.  Also, I want to be able to change my themes at will and too many who make skins/themes do not allow changes to be made.

Hey Tumbleweed, come on back and share your code with us.  

Beckea, Can we keep all this info in this one thread so we all stay on the same page?  I'd love that.



Hi Tumbleweed.  I'm really anxious to try out your code.

[Tumbleweed]

I'm sorry, guys, somehow I missed this. This is what you do. Head to your wrapper template (Admin Home> Themes> Layout Templates> and click on Forum Wrapper) and find where it the id wrapper divide is  and add the blue: (Sorry, I was lazy and just used breaks (<br>) to give me the space above (and below) the "framing".

<br><br><br><br>
<div id="wrapper">
<div id="wrapper_two">
<div id="wrapper_three">

Then scroll down to the bottom of that template and find the very last ending </div> and add the blue: (The last divide should be right under the 
$[footer] as shown below.)

$[footer]

</div>
</div>
</div>
<br><br><br><br>

And this is what I'm using for styling and this goes at the bottom of your style sheet.  (Admin Home> Themes> Advanced Styles & CSS> Style Sheet)


body{background-image:url(https://cdnw.nickpic.host/mLpK1q.png);background-repeat:repeat;
}
#wrapper{width:82%;background-image:url(https://cdnw.nickpic.host/mLpa7X.png);background-repeat:repeat;padding:10px;margin-right:auto;margin-left:auto;
}
#wrapper_two{background-image:url(https://cdnw.nickpic.host/mLpw8O.png);background-repeat:repeat;margin:12px;padding:6px;
}
#wrapper_three{background-color:#7e043d;margin:6px;padding:18px;
}

After that it's just a matter of you dabbling with the padding, margins and widths to get the look you want and of course adding your own images. (I left my images in there.)

[queenfoxy]

Thank you so much, Tunbleweed,  I am forever grateful for this code you have shared with me.   Not to worry about the time it took.  I will use it forever.  Can hardly wait to get started on it to give it a try.  You guys are fabulous and I so much appreciate you.  

[Tumbleweed]

Oct 3, 2017 11:47:11 GMT -8 queenfoxy said:

Thank you so much, Tunbleweed,  I am forever grateful for this code you have shared with me.   Not to worry about the time it took.  I will use it forever.  Can hardly wait to get started on it to give it a try.  You guys are fabulous and I so much appreciate you.  

Aww, thanks.I'm glad I could help. I always think it is fun to see what you can create using multiple layers. Post back if you run into any problems.