Results 1 to 10 of 11

Hybrid View

  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.


 

 

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