Exteding background image to cover main page edits

[ScottDB]

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

[dbltoe]

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.

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.

[gjh42]

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.

[ScottDB]

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.

[ScottDB]

Dang 7 min edits

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.

[dbltoe]

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

[ScottDB]

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

<div id="mainData"> then the text </div> in the define main page editor.

Then the code given below in the css.

[ScottDB]

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
<div id="topscroll"></div> to place image in the define main page.
Then under that I put <div id="middlescroll"> the text I want to put in </div>
Then put under that<div id="bottomscroll"></div>
and in the css I should put

.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

[gjh42]

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.

[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.