Results 1 to 10 of 21

Hybrid View

  1. #1
    Join Date
    Jul 2011
    Posts
    93
    Plugin Contributions
    0

    Default 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
    Best Regards,
    Scott
    My test site

  2. #2
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,701
    Plugin Contributions
    11

    Default Re: Exteding background image to cover main page edits

    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.
    A little help with colors.
    myZenCartHost.com - Zen Cart Certified, PCI Compatible Hosting by JEANDRET
    Free SSL & Domain with semi-annual and longer hosting. Updating 1.5.2 and Up.

  3. #3
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Exteding background image to cover main page edits

    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.

  4. #4
    Join Date
    Jul 2011
    Posts
    93
    Plugin Contributions
    0

    Default Re: Exteding background image to cover main page edits

    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.
    Best Regards,
    Scott
    My test site

  5. #5
    Join Date
    Jul 2011
    Posts
    93
    Plugin Contributions
    0

    Default Re: Exteding background image to cover main page edits

    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?
    Code:
    #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.
    Best Regards,
    Scott
    My test site

  6. #6
    Join Date
    Jan 2004
    Location
    N of San Antonio TX
    Posts
    9,701
    Plugin Contributions
    11

    Default Re: Exteding background image to cover main page edits

    css goes in stylesheets.
    divs go in text with data inside the divs
    A little help with colors.
    myZenCartHost.com - Zen Cart Certified, PCI Compatible Hosting by JEANDRET
    Free SSL & Domain with semi-annual and longer hosting. Updating 1.5.2 and Up.

  7. #7
    Join Date
    Jul 2011
    Posts
    93
    Plugin Contributions
    0

    Default Re: Exteding background image to cover main page edits

    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.
    Best Regards,
    Scott
    My test site

 

 

Similar Threads

  1. Background image cover entire background w/one image
    By oxicottin in forum Templates, Stylesheets, Page Layout
    Replies: 43
    Last Post: 3 Apr 2012, 03:18 PM
  2. Background Colour/Image Main Page
    By gee38l in forum Templates, Stylesheets, Page Layout
    Replies: 11
    Last Post: 9 Jan 2009, 03:25 PM
  3. Background image on main page
    By johnagr in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 23 Aug 2008, 01:49 AM
  4. Background image on main page
    By JHouston in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 12 Mar 2008, 08:24 PM
  5. Main page background image problem!
    By tsaurus in forum Templates, Stylesheets, Page Layout
    Replies: 16
    Last Post: 1 Oct 2006, 03:13 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg