Results 1 to 6 of 6
  1. #1
    Join Date
    Nov 2006
    Location
    Quebec, Canada
    Posts
    32
    Plugin Contributions
    0

    Default background image won't repeat

    Hi CSS gurus!
    I'm stuck with a problem here and couldn't find a solution after searching the forum and google for tutorials.

    I'm in the process of fixing my shop before going live and I'm trying to change a table for divs (this is the only thing that was not validating).

    What's going wrong now is that I have shadow images that goes on each side of the mainWrapper tag that won't repeat vertically just like when it was coded with plain html.

    Now I'm not exactly sure where the problem is... it might be in tpl_main_page.php (misplaced div tag?) or it could be another CSS tag that would stop my wrapper from repeating but I think it's less likely to be the case...

    Here's the CSS I've added to the stylesheet:

    #pageCenter {
    width: 715px;
    margin-left: auto;
    margin-right: auto;
    }
    #pageLeft {
    float: left;
    width: 12px;
    background-image: url(../images/border_left.gif);
    background-repeat: repeat-y;
    }
    #pageRight {
    float: right;
    width: 12px;
    background-image: url(../images/border_right.gif);
    background-repeat: repeat-y;
    }

    You can also see my website at www.finalrecords.com/store

    Thanks for any input you can give me on this one!

  2. #2
    Join Date
    Apr 2006
    Location
    West Salem, IL
    Posts
    2,739
    Plugin Contributions
    0

    Default Re: background image won't repeat

    well the old way with the tables keep other things from interfering. It looks like the images start to repeat and the stop , in fact they repeat 12 times making a neat little 12 x 12 block. I would suggest another method.....wrap the mainWrapper div in another div (outerMainWrapper) and then create an image 1px height and 24 px wider than the mainWrapper (12px each side) and background the outerMainWrapper with that. See what you get.
    It would be nice if the firefox web developer plugin would let me work with relative paths to images, would make answer questions like this easier.
    Mike
    GeekHost - Zen Cart Certified & PCI Compliant Hosting
    The Zen Cart Forum...Better than a monitor covered with post-it notes!

  3. #3
    Join Date
    Nov 2006
    Location
    Quebec, Canada
    Posts
    32
    Plugin Contributions
    0

    Default Re: background image won't repeat

    Hey barco! Thanks for the reply!

    In fact, my image is 12px wide and 1px high. There's a   between my div tags (the background wouldn't even appear without them!) that my give the impression that my background tile is 12x12 px.

    Other than that, I understand your approach but was more looking to do it my way as I think it's more scalable. Suppose I want to change my header width next week, I'll just have to upload the image and change de width value in the CSS and I'll be done without having to recreate a new shadow effect.

    But thanks anyway, I'll keep this idea in my in case nobody can come up with a solution that fit my needs!

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

    Default Re: background image won't repeat

    If you need to allow for changing the width, you can just use two outerMainWrappers. Give outerMainWrapper1 a padding-left and put the left shadow there, and outerMainWrapper2 a padding-right and the right shadow.

  5. #5
    Join Date
    Nov 2006
    Location
    Quebec, Canada
    Posts
    32
    Plugin Contributions
    0

    Default Re: background image won't repeat

    Ok, I gave a try to barco's method and found it easier than to have to write a lot a code and struggle with tags placement and all so I decided to stick with this method.

    Thanks a lot for your help!

  6. #6
    Join Date
    Apr 2006
    Location
    West Salem, IL
    Posts
    2,739
    Plugin Contributions
    0

    Default Re: background image won't repeat

    glad it worked for you.
    Mike
    GeekHost - Zen Cart Certified & PCI Compliant Hosting
    The Zen Cart Forum...Better than a monitor covered with post-it notes!

 

 

Similar Threads

  1. v150 css problem - my background-image won't show
    By Kathy_ in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 20 May 2012, 11:43 PM
  2. Background image won't display
    By dsewell in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 24 Mar 2008, 03:46 AM
  3. Background image won't display
    By bgroup99 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 30 Nov 2007, 05:21 PM
  4. Background Image repeat
    By Meje in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 20 Nov 2006, 07:19 AM

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