Page 1 of 3 123 LastLast
Results 1 to 10 of 28
  1. #1
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Trying to use an image background on .leftBoxHeading to no avail

    I'm using the following code in my main stylesheet.css:

    .rightBoxHeading, .leftBoxHeading {
    background:transparent url(../images/button-bg.gif) repeat-x;
    }

    h3.rightBoxHeading, h3.leftBoxHeading {
    background:transparent url(../images/button-bg.gif) repeat-x;

    However, the button background just simply will not load! Where am I going wrong??

  2. #2
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: Trying to use an image background on .leftBoxHeading to no avail

    Have also tried:

    .rightBoxHeading, .leftBoxHeading {
    background-image url(../images/button-bg.gif) repeat-x;
    }

    h3.rightBoxHeading, h3.leftBoxHeading {
    background-image url(../images/button-bg.gif) repeat-x;

    NOTHING!?!??!

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

    Default Re: Trying to use an image background on .leftBoxHeading to no avail

    Try
    Code:
    .rightBoxHeading, .leftBoxHeading {
    background-color: transparent; 
    background-image: url(../images/button-bg.gif);
    background-repeat: repeat-x;
    }
    http://www.w3schools.com/Css/default.asp
    Zen-Venom Get Bitten

  4. #4
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: Trying to use an image background on .leftBoxHeading to no avail

    Hey, thanks for the reply Kobra, I've edited my stylesheet as suggested:

    .rightBoxHeading, .leftBoxHeading {
    background-color: transparent;
    background-image: url(../images/button-bg.gif);
    background-repeat: repeat-x;
    }

    h3.rightBoxHeading, h3.leftBoxHeading {
    background-color: transparent;
    background-image: url(../images/button-bg.gif);
    background-repeat: repeat-x;

    However, still nothing see:

    http://www.dystynction.com/index.php...roducts_id=182

    What do you think could be wrong?
    Last edited by Kim; 1 Feb 2009 at 06:58 PM. Reason: removed ZenID from URL

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

    Default Re: Trying to use an image background on .leftBoxHeading to no avail

    You need to check the w3schools link I posted for proper syntax and notice also that you have this declared TWICE and the latter is the one being rendered
    You can only declare one tag - one time for the same item:
    Code:
    h3.rightBoxHeading, h3.leftBoxHeading  {
    background-color: transparent; 
    background-image: url(../images/button-bg.gif);
    background-repeat: repeat-x;
    }
    
    margin:0;
    }
    
    h3 label {
    font-size:1.0em;
    }
    
    h3.rightBoxHeading, h3.leftBoxHeading  {
    color: #fff;
    font: 13px tahoma, arial, sans-serif;
    font-weight: bold;
    padding-left: 33px;
    padding-top: 4px;
    padding-bottom: 4px;
    background-image: url(../images/heading-bg.gif);
    background-position: 7px 3px;
    background-repeat: no-repeat;
    text-align:left;
    }
    Where margin:0 is hanging out by itself after you have already closed the statement before it
    Zen-Venom Get Bitten

  6. #6
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: Trying to use an image background on .leftBoxHeading to no avail

    Thank you Kobra, you're a genius as I'm sure you've been told before.

    I don't know how I didn't see the double entry, thank you!!

    Now I just need to find how to stretch the new background image to the full width of the left boxes :-)

  7. #7
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: Trying to use an image background on .leftBoxHeading to no avail

    A follow on from this topic:

    Now that I have the background image instead of the background colour, it's taken away the little .gif that used to occupy the left side just before the heading?

    This was the old code:

    h3.rightBoxHeading, h3.leftBoxHeading {
    color: #fff;
    font: 13px tahoma, arial, sans-serif;
    font-weight: bold;
    padding-left: 33px;
    padding-top: 4px;
    padding-bottom: 4px;
    background-image: url(../images/heading-bg.gif);
    background-position: 7px 3px;
    background-repeat: no-repeat;
    text-align:left;
    }

    Which as you know I replaced with:

    h3.rightBoxHeading, h3.leftBoxHeading {
    color: #fff;
    font: 13px tahoma, arial, sans-serif;
    font-weight: bold;
    padding-left: 33px;
    padding-top: 4px;
    padding-bottom: 4px;
    background-image: url(../images/heading-bg.gif);
    background-position: 7px 3px;
    background-repeat: no-repeat;
    text-align:left;
    }

    I wonder if there is a way to keep the little .gif to the left of the heading AS WELL as the background-image setting?

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

    Default Re: Trying to use an image background on .leftBoxHeading to no avail

    They are both background images, so you will need to go into Photoshop and paste the gif onto your new background image in the location you want it.

  9. #9
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: Trying to use an image background on .leftBoxHeading to no avail

    Hi,

    I had considered using a better graphic but I'd have to make it a larger .gif file.

    At the moment, it's less than 1kb with a repeat-x function to fill the row. If I make a 'twin' graphic then I'd need to remove the repeat function and instead have a 300px wide.

    I know that Zen cart is only, 'so' customisable and I accept that I can't have my cake and eat it too :-)

  10. #10
    Join Date
    Jan 2009
    Posts
    2,123
    Plugin Contributions
    0

    Default Re: Trying to use an image background on .leftBoxHeading to no avail

    Also, if I did use a longer graphic image, how would I make all of the headings texts move across to the right by about 20px ??

    Is there a margin setting in CSS that controls all of the heading texts?

 

 
Page 1 of 3 123 LastLast

Similar Threads

  1. Trying to change large header background image?
    By uruharacosplay in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 30 Apr 2009, 10:02 PM
  2. Trying to add a background image to main page
    By ajhb in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 11 Sep 2008, 09:08 AM
  3. Editing CSS in Dreamweaver, trying to put a background image.
    By jamesdavid in forum Templates, Stylesheets, Page Layout
    Replies: 21
    Last Post: 12 Jun 2008, 08:18 PM
  4. How to use an absolute background image?
    By minson in forum Templates, Stylesheets, Page Layout
    Replies: 10
    Last Post: 25 Mar 2007, 12:09 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