WordPress.org

Ready to get started?Download WordPress

Forums

Transparency issue with PayPal button gif (6 posts)

  1. heavystarch
    Member
    Posted 4 years ago #

    Theme: Thesis
    Site: http://www.reddragonaudio.com/products/m-500-monoblocks/
    PayPal button imgsrc: https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif

    On the page above the PayPal button/img loses transparency when it is inside a

    <form>
    <img src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif">
    </form>
    .
    (the form is part of code for PayPal)

    Posting the image in the body outside of the <form> tags allows transparency. <img src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif">

    Can something be done in CSS to allow .gif transparency in a <form>

  2. esmi
    Forum Moderator
    Posted 4 years ago #

    CSS doesn't control transparency in a .gif file. It's encoded in the file itself. The white background is coming from:

    input, textarea {
    background:#EEEEEE;
    border-color:#AAAAAA #DDDDDD #DDDDDD #AAAAAA;
    border-style:solid;
    border-width:1px;
    color:#444444;
    font-size:1em;
    }
  3. heavystarch
    Member
    Posted 4 years ago #

    esmi,

    Thanks for the quick response! I will give it a go.

  4. heavystarch
    Member
    Posted 4 years ago #

    Well I have returned failing to find the CSS string you showed me. Where is that bit located?

    I plan to change background:#EEEEEE to background:#000000 but that seems like it may cause issues since this bit is about input, textarea

    Is there a better way to handle this issue than what I have suggested?

    Thanks again!

  5. heavystarch
    Member
    Posted 4 years ago #

    .custom input, textarea {
    background:none;
    border:none;
    }
  6. heavystarch
    Member
    Posted 4 years ago #

    Yep what I posted above did exactly what I thought it would; it blacked out my my contact form.

    .custom input, textrea{
    background: none;

    However I finally figured out what I needed to do! (looks like I need to take CSS-101)

    In my custom.css file I have added this line at the end:
    .custom .paypal_image { border:none; background:transparent; width:auto; }

    Then I added class="paypal_image to the HTML code inside the PayPal <form>

    <input type="image" class="paypal_image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" height="26" width="120" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

Topic Closed

This topic has been closed to new replies.

About this Topic