Page 1 of 2 12 LastLast
Results 1 to 10 of 16
  1. #1
    Join Date
    Apr 2008
    Posts
    193
    Plugin Contributions
    0

    Default 2 backgrounds, vertical fade for the center content, horizontal fade for the sides.

    Can I use 2 background style divs so I can have a background the width of content of my page which extends down (below the content), and a separate background image for the sides?

    You can sort of see what I mean at http://www.mitea.com/ This one could be been done with one background but my site needs a vertical fade for the center content, and a horizontal fade for the sides.

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

    Default Re: 2 backgrounds, vertical fade for the center content, horizontal fade for the side

    You can apply the horizontal fade background-image to the body declaration in your stylesheet, and the vertical fade to the #mainWrapper declaration. #mainWrapper needs a fixed width for this to work correctly.

  3. #3
    Join Date
    Apr 2008
    Posts
    193
    Plugin Contributions
    0

    Default Re: 2 backgrounds, vertical fade for the center content, horizontal fade for the side

    Thanks for your reply, but at the moment my #mainWrapper doesnt go down to the bottom of the page, it only goes down as far as there is content. I need the vertical fade to continue down below the footer, all the way to the bottom of the screen.

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

    Default Re: 2 backgrounds, vertical fade for the center content, horizontal fade for the side

    You can add to #mainWrapper

    min-height: 1200px;

    or whatever will serve you.
    This will not work in IE6, but it should cover you in modern browsers.

  5. #5
    Join Date
    Apr 2008
    Posts
    193
    Plugin Contributions
    0

    Default Re: 2 backgrounds, vertical fade for the center content, horizontal fade for the side

    The problem is now that there is lots of unused scrollable space. Sorry to be pedantic!

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

    Default Re: 2 backgrounds, vertical fade for the center content, horizontal fade for the side

    For starters, make the min-height as small as you can while achieving your layout goal.

    A link to your site would make it easier to give good advice.

  7. #7
    Join Date
    Apr 2008
    Posts
    193
    Plugin Contributions
    0

    Default Re: 2 backgrounds, vertical fade for the center content, horizontal fade for the side

    Im working on the site locally so im afraid i cant show it to you.

    Any minimum height I set to the #mainWrapper needs to be conservative for people with smaller monitors. This means that there is always going to be space underneight, especially on larger monitors.

    When im working on a normal html site and I want 2 background images I put a div within a div. I know code wise this is 'messy' but as it doesn't really affect loading times or accessibility ive always been happy to do it. Is there a way of doing this with zen cart? Could I add another div in the PHP?

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

    Default Re: 2 backgrounds, vertical fade for the center content, horizontal fade for the side

    You certainly can do this. In many locations there is already a "xxWrapper" div; you can add another one if needed in tpl_main_page.php.

  9. #9
    Join Date
    Apr 2008
    Posts
    193
    Plugin Contributions
    0

    Default Re: 2 backgrounds, vertical fade for the center content, horizontal fade for the side

    Could I do this for the background? the background isn't in a div, is it?
    james

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

    Default Re: 2 backgrounds, vertical fade for the center content, horizontal fade for the side

    It depends on which background you are talking about. The body can have a background without a div, but #mainWrapper and everything inside it is a div (with a few exceptions). Any HTML element can have a background.

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Ultimate fade in slide show
    By American speed in forum All Other Contributions/Addons
    Replies: 1
    Last Post: 5 Feb 2013, 12:02 AM
  2. Ultimate Fade-In Slideshow
    By Finna in forum All Other Contributions/Addons
    Replies: 0
    Last Post: 5 Sep 2011, 12:31 PM
  3. .messageStackSuccess fade in and fade out?
    By limelites in forum General Questions
    Replies: 6
    Last Post: 9 Sep 2010, 02:09 PM
  4. Center Ezpage Fade Slide Show
    By perkiekat in forum Basic Configuration
    Replies: 5
    Last Post: 17 Nov 2009, 08:30 PM
  5. How to change the procuts from vertical to horizontal?
    By Elverdugo0 in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 2 Jun 2009, 06:52 PM

Bookmarks

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
Zen-Cart, Internet Selling Services, Klamath Falls, OR