Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Mar 2007
    Posts
    24
    Plugin Contributions
    0

    help question How to use an absolute background image?

    I want to use a background image on the main part of the page (to each side of the actual store, ya know, the main body background)

    I have it on the other part of my site, but I can't quit get it intergrated into the store pages.

    Here is what the css for it looks like:

    Code:
    body {
        margin: 20;
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 62.5%;
        color: #000000;
        background-color: #646263;
        background-image: url(../images/background.jpg);
        }
    
    #bgImage 
    {
        width:     100%;
        height:     100%;
        left:         0px;
        top:         0px;
        position:     absolute;
        z-index:     0;
    }
    One the other html pages on my site, I place the following code to make this appear as the background image:

    Code:
    <div id="bgImage" align="center">
    <img src="background.jpg" style="width: 100%; height: 100%;">
    </div>
    How can I do this within the store setup?

    TIA!

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,761
    Plugin Contributions
    9

    Default Re: How to use an absolute background image?

    Don't know what your image looks like....I ahve some that range from 3x3px to 200x200px tiles that repeat horiz & vert.

    It is the same as your body entry that you posted but in the stylesheet.css file for Zen Cart and the template that you are using.
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Mar 2007
    Posts
    24
    Plugin Contributions
    0

    Default Re: How to use an absolute background image?

    The image is actually stretched to fit the background on the page.

    Take a look at www.tailormaidbowstrings.com/links.html to see what I mean.

  4. #4
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,761
    Plugin Contributions
    9

    Default Re: How to use an absolute background image?

    You referring to the gray gradient background??
    Zen-Venom Get Bitten

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

    Default Re: How to use an absolute background image?

    Use the attached jpg (gleaned from your site) place it in includes/templates/YOUR_CUSTOM_TEMPLATE/images folder

    Then in your stylesheet in the body statement add the following
    background-image: url(../images/bkgrd.jpg);

    and also set the background-color to match the bottom of the background image
    Attached Images Attached Images  
    Mike
    GeekHost - Zen Cart Certified & PCI Compliant Hosting
    The Zen Cart Forum...Better than a monitor covered with post-it notes!

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

    Default Re: How to use an absolute background image?

    You have two kinds of images going on with the code you show - a background image in your CSS body declaration, and a foreground image placed/stretched on top of it. You don't need both.

    Using the stylesheet code Mike gave you will do the whole job the best way.

  7. #7
    Join Date
    Mar 2007
    Posts
    24
    Plugin Contributions
    0

    Default Re: How to use an absolute background image?

    Thanks Mike.

    I gave that a try, but all that it did was tile that image, not stretch it over the whole thing in one solid big piece.


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

    Default Re: How to use an absolute background image?

    ok scale that image vertically.....stretch it....til it starts to look bad or create a new gradient that is tall and thin close to what you expect your store to be in height and than you also have to add background-repeat: repeat-x; to the stylesheet right below the background-image declaration to keep the image from tiling vertically. Make sure the body background-color is set to what ever the color is at the bottom of the image so that the two blend together. What your looking to do with stretching the smaller image doesn't work in css.
    Mike
    GeekHost - Zen Cart Certified & PCI Compliant Hosting
    The Zen Cart Forum...Better than a monitor covered with post-it notes!

  9. #9
    Join Date
    Mar 2007
    Posts
    24
    Plugin Contributions
    0

    Default Re: How to use an absolute background image?

    Thanks barco57, I did that and now it is close. Closer than I was before.

    I do use CSS with the smaller image on the rest of the site and it does work. The gradient image for the rest of the site is 333 wide & 250 tall.

    I then place the following code in my css files

    Code:
    #bgImage 
    {
        width:     100%;
        height:     100%;
        left:         0px;
        top:         0px;
        position:     absolute;
        z-index:     0;
    }
    and this just after the body tag in the HTML file:

    Code:
    <div id="bgImage" align="center">
    <img src="background.jpg" style="width: 100%; height: 100%;">
    </div>

    I wanted to try to do that with the ZC files, but I couldn't figure out which file to put he div id into.

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

    Default Re: How to use an absolute background image?

    The css by itself will not stretch the image, its the inline styles in your html that are doing the stretching. If you want to play with this you will have to mess around in includes/templates/YOUR_CUSTOM_TEMPLATE/common/tpl_main_page.php
    Mike
    GeekHost - Zen Cart Certified & PCI Compliant Hosting
    The Zen Cart Forum...Better than a monitor covered with post-it notes!

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v139h Page Background - Can I use an 'image' instead of a colour - if so How?
    By shags38 in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 6 Jul 2012, 09:56 AM
  2. Use an image as background? pure black template
    By Nigraphics in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 6 Aug 2011, 07:58 PM
  3. How do you use a background image instead of color?
    By only1patrick in forum General Questions
    Replies: 1
    Last Post: 28 Jul 2009, 12:46 PM
  4. Trying to use an image background on .leftBoxHeading to no avail
    By limelites in forum Templates, Stylesheets, Page Layout
    Replies: 27
    Last Post: 3 Feb 2009, 04:36 AM
  5. Can I use a background image for entire pages?
    By bluealice in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 25 Jan 2007, 10:56 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