Problem with The bottom of my wrap is moving with the scroll up and down.

Hey, guys...
I'm not sure how to describe this, but I will try.

I am making a forum wrap to be separate by 3 pieces - it's actually parchment image where I separate it.
Please, check my CSS for #wrap:

Code:

#wrap { padding: 0px; background: url(https://i.ibb.co/rkpf55S/vtoricenter.png) top center repeat-y  ;
width: 1150px; margin-top: 309px;}
#page-body {    padding: 25px; width: 1100px; margin: 0px;}
#search-box, .search-box, fieldset.vf_jumpbox, fieldset.jumpbox {display: none;}
#page-footer, div.navbar, div.navbar ul.linklist {padding-left: 10px; font-size: 10px !important; }
body {
 background: url(https://i.ibb.co/QjXT4FJ/top.png) no-repeat, url(https://i.ibb.co/PxY0xzx/bottom.png) no-repeat , url(https://i.pinimg.com/originals/12/91/95/129195b9774e32056d90153286ad4e18.jpg) repeat ;
 background-position: center top, center bottom, center top;
 background-attachment: scroll,  fixed, scroll; 
 background-color: #f2e5ae;}

Please, check my forum as well: https://torenti.bulgarianforum.net/
When you go in the forum, in the back side you can barely see the "bottom" piece of the parchment moving around, when you scroll up or down.
My question is - How to make it static in the bottom and where is the Who is online statistics, to be there?

Thank you for your help!

Do you mean the  part that is marked in this secreenshot?

If it's moving up and down, when you scrolling - yes.

Edit: I think that what you post it's the problem.
I put this picture to position margin-bottom, but it's not stand in the bottom, but it's going up and down when you scroll the page.

find this in your css and delete it
url(https://i.ibb.co/PxY0xzx/bottom.png) no-repeat ,

My problem is not that I want to delete this part.
I want to "stuck" it down /bottom/ of the page, where is Who is Online, not to go with my scrolling around.
Is there some chance?

in order for the image to not scroll you have to set it
background-attachment: fixed;

Yes, it is.
Please, check my CSS in this part:

Code:

body {
 background: url(https://i.ibb.co/1v6tH6d/newtoptop.png) no-repeat, url(https://i.ibb.co/PxY0xzx/bottom.png) no-repeat , url(https://i.pinimg.com/originals/12/91/95/129195b9774e32056d90153286ad4e18.jpg) repeat ;
 background-position: center top, center bottom, center top;
 background-attachment: scroll, fixed, scroll; 
 background-color: #f2e5ae;}

Yes i see it but some browsers versions do not support multiple background images on one element
Maybe that is why the image dont apply to your css

My browser is not making me a problem, because there is two backgrounds in the top, one in the middle and I'm trying to put to the bottom, but it's not happen.

But is there not already a background iumag for the whole forum from top to bottom?  I mean I see one for the who's online section.

SLGray wrote:But is there not already a background iumag for the whole forum from top to bottom?  I mean I see one for the who's online section.

yes i was wondering also , if you make that image fixed will be hidden underneath the others

From the screenshot of SLGray, I put this bottom image in fixed, but I put !important as well and the image stuck, but... it's stucked in the top.

I want to make this part to be down, where is Who is Online section and to make it like completely parchment. Now it look like - it's good at the top and the middle, but the middle image of the parchment goes beyond Who is Online Section.

So, my point is - I would like to put the bottom image (https://i.ibb.co/PxY0xzx/bottom.png - this one), in the bottom of the page to be completely parchment like this image - https://i.ibb.co/tcqXJDC/paper-png-clipart-psd-vector-download-13.png

So, that's why I don't understand - everything else is correct, also bottom codes, but it's not make it down.
Probably, if I put this in the footer page?

Edit: Please, check this image:


This part, where I made it with white, down, bottom, it's going up and down, when I scrolling around. How I can fixed it /without texting "fixed" in css, because It Is fixed/ so this part could stay down, looking like complete parchment?

now it is visible what are you trying to do
you want this to be fixed

skouliki wrote:now it is visible what are you trying to do
you want this to be fixed

Correct, I edit my last post, you can see there what I mean.
Thank you!

i make it fixed but it is not in place

I know, that's why I am trying to get any help, if you know how to fixed it.

you have also this

Code:


#wrap {
    padding: 0px;
    background: url(https://i.ibb.co/rkpf55S/vtoricenter.png) top center repeat-y;
    width: 1150px;
    margin-top: 309px;


so you have 3 background images set as background to body element and another one to wrap element
it is causing a conflict


use 1 only https://i.servimg.com/u/f28/11/40/02/06/1591.png

That's good idea, skouliki, but there is a problem - I can't put one photo with, let's say for example - 1150 px width and 750px height, because there will have more forums, who will be created and this will not be enough.

The other solution that I can see, I can extend the middle part of your photo to cover all forums and categories? But still in the topic, if they write more than this, it will appear the first top pixels down again, because of the repeat effect. If there is no repeat effect is going to be clear.

Hello

Here's my solution, just give it a try

Code:

body {
    background: url(https://i.ibb.co/1v6tH6d/newtoptop.png) no-repeat, url(https://i.pinimg.com/originals/12/91/95/129195b9774e32056d90153286ad4e18.jpg) repeat;
    background-position: center top;
    background-attachment: scroll;
    background-color: #f2e5ae;
}
body:after {
    content: "";
    background: url(https://i.ibb.co/PxY0xzx/bottom.png);
    height: 310px;
    width: 1250px;
    display: block;
    margin: -6px auto 20px auto;
}

Please consider uploading your images to an image hosting with short-link supported, like https://imgur.com or https://servimg.com/

Thank you for your suggestion where to upload. Cheers.

About the css code.
It's happened and it looks amazing.
But...
There is one problem, that I'm trying to solve, but I couldn't with some margin codes...
Could you help me?
I will attach image, where you can see what I mean.
I want the bottom image to go up a little bit, just to be together, because it looks not good.

Please, check this out:

Spoiler:

Edit:
It's done - I had to change your margin writing, I made it.
Oh, thank you so much for your help!
Thanks to everybody, who tried to help me!
You are amazing support!

Solved.