Exteding background image to cover main page edits

Hi, I know this is possible and know that it probably is a lot of work to incorporate into this script. At least I think it is a lot of work.

What I am trying to do is to be able to add or subtract from the define main page editor for the index page and not have to adjust the size of the image or figure out how many </br> I need in the editor to cover the image. I figured this could be done by splitting the image in half and having a top and bottom to it and added by css. I've seen it in other scripts but never really worked with it before myself.

I am trying to edit the scroll paper image here

One of the things search engines look for is the ratio between code and text. You have enough code there that it will take War and Peace to get a positive ratio.:shocking:

Seriously, Try an initial <div id="mainData">that has the text, a <div id="mainSccript"> with the script, a <div id="mainSecData"> with the secondary text, and a <div class="sticky"> for the sticky. Of course, you will need to have these in the define_main_page AND in the stylesheet.

Then, using margin-top and margin-bottom for each, you can adjust their location up or down easily.

Get yourself a copy of firefox with the firebug add on to assist you with this.:yes:

It should be very little work. You will want a div at top of define_main_page to hold the scroll top and one at the bottom to hold the scroll bottom. These can be actual images, or background images if you want text to be able to cover them. The body gets a section of straight scroll background with repeat-y so it fills the content from top to bottom; the divs appear on top of this and hide the scroll ends with curls.

Alternatively, if you have a limited range of heights to accommodate, you can use just two images: the scroll top and a long straight section (taller than any likely page) and a div at the bottom of the file with the bottom curl. The bottom div will display on top of the main body and hide the straight scroll bottom end.

As dbltoe says, Firefox with Web Developer and/or Firebug will help immensely in doing this.

Thanks so much for the responses. I already have firefox withe the firebug add on and just started using it a couple of months ago. Had it for over a year and never used it until I read a couple of posts here. Didn't know what I could do with it until then. Man what a time saver. I'll play around with this and see what I come up with.

Dang 7 min edits:censored:

Thanks for the advice on the code vrs text. Didn't know about that.

So for the <div id="mainData"> I would need to put into the css something like this?

#mainData {
	text-align: left 132px; 
        width: 500px; 
        font-family: Monotype Corsiva; 
        font-weight: bold
	}

But what about the script. Ive never seen script added in with css.

css goes in stylesheets.
divs go in text with data inside the divs

yes I understand. I guess I just didn't explain myself very well.

Then the code given below in the css.

So just to see if I am getting this correct. I cut the image into 3 sections.
The top I use topscroll.jpg for image and to keep it simple

.centerBoxWrapper {
	border: 0px;
	height: 1%;
	margin: 1.1em 0;
	}
.topscroll {
        background-image: url(../images/topscroll.jpg);
        }

.middlescroll {
        background-image: url(../images/middlescroll.jpg)repeat-y ;
        }
.bottomescroll {
        background-image: url(../images/bottomscrol.jpg);
        }
``` I know I probably have this all screwed up and have misses a lot

You don't want the middlescroll div at all (for background purposes). That is the part of the file where all of your real content goes. The middlescroll image would be the background for #indexDefaultMainContent.

You could give .topscroll and .bottomscroll negative margin-top or margin-bottom so that they are "pulled" up or down to fully cover the edges of the main scroll background.

Well I tried to do as suggested and the bottom and top images are not showing. Here is what I have.

#indexDefault {
	background-image: url(../images/parchmentmid.png); 
	}
	
.topscroll {
        background-image: url(../images/parchmenttop.png);
        margin-top
        }
        
.bottomescroll {
        background-image: url(../images/parchmentbtm.png);
        margin-bottom
        }	
       

for the define main page edits I have <div id="topscroll"> as the first of the page code with the text that goes in the middle next.

Then at the bottom of the page code I have <div id="bottomscroll"></div>.

All images are in the main image folder as well as in the template images folder.

You have the divs, but without actual content or styled dimensions, they will collapse to points and be invisible. A background-image has no effect on the element size.

<div id="topscroll"></div>

index_home.css (line 725)```
#topscroll {
background-image: url("../images/parchmenttop.png");
}

#topscroll {
    background-image: url("../images/parchmenttop.png");
    height: 55px;
    width: 100%;
}
```

Well I got the images to show on the page but they are both at the top and not connecting. Not sure what you meant by

gjh42:

You could give .topscroll and .bottomscroll negative margin-top or margin-bottom so that they are "pulled" up or down to fully cover the edges of the main scroll background.

This is what I have

#indexDefault {
	background-image: url(../images/parchmentmid.png); 
	}
	
#topscroll {
        background-image: url(../images/parchmenttop.png);
        height: 55px;
        width: 100%;
        margin-top
        }
        
#bottomescroll {
        background-image: url(../images/parchmentbtm.png);
        height 55px;
        width: 100%;
        margin-bottom
        }	

#topscroll {
    background: url("../images/parchmenttop.png") no-repeat scroll 63px 0;
    height: 55px;
    margin-top: 25px;
}
index_home.css (line 725)

You know I was just thinking I am getting a good grasp on this and thought that I could handle getting the bottom one to show up right with just adjusting the numbers but I guess not. I hate it when I have to be led by the hand and told how to do everything and not be able to figure it out for myself.

So the bottom one is not showing. I tried using different numbers to get it to show but no luck. Here is what I have for the code.

#topscroll {
    background: url("../images/parchmenttop.png") no-repeat scroll 63px 0;
    height: 55px;
    margin-top: 25px;
    }
        
#bottomescroll {
    background-image: url(../images/parchmentbtm.png) no-repeat scroll 63px 0;
    height: 55px;
    margin-bottom: 25px;
    }	

Thanks for the help and for being so patient with me.

I was playing around with this some more and I still can't get the bottom to work. I noticed that the #bottomescroll had background-image and I changed that as well to just background.

edited. Just found the problem. Mispelled bottomescroll. Now it shows and I just have to get it to show in the right place by changing the numbers.

Well this has got me totally confused. No matter what I change the numbers to I can't get rid of the space between the middle section and the bottom scroll.

What numbers are you changing? margin-bottom? margin-top is what will control the space between the content and the bottom scroll.

I figured out what the problem was. The middle image had a big gap between the bottom of the image layer and the border of the image.

Now the last problem I think I am having is that the middle image is not expanding with the text inside it just repeats. Not exactly sure what is going on with it. You can see what it is doing here

Code I am using is

#indexDefault {
	background-image: url(../images/parchmentmid.png)no-repeat; 
	}
	
#topscroll {
    background: url("../images/parchmenttop.png") no-repeat scroll -8px 0;
    height: 125px;
    margin-top: -10px;
    }
        
#bottomescroll {
    background: url(../images/parchmentbtm.png) no-repeat scroll 20px 0;
    height: 155px;
    margin-bottom: 0px;
    }	

#index default is the middle image

Hi, I am really appreciative of the help that I have gotten so far but this is the last thing I need to do before I can start getting this uploaded to the person I am doing this for. She is really bugging me about this and I am desperate to get this done. Is this even possible?