Resize image

HTML & CSS
1

Hi,

I was trying to replace a add to cart button with another one…

The new one was a little bigger than the old and as a result is cut up half way via the old code settings… see attached

The size of the image is 149x26

I have this code for the old one…

.foxycart img { width:auto; border:none; background:none }
.foxy-submit { padding: 5px 10px 5px 30px; margin:10px 0 0; background:#fff url(images/addtocart.png) no-repeat 7px center; float:left; border:2px solid #3790A6; }
.foxy-submit:hover { border:2px solid #000 }
.foxycart select { float:left; margin:0 20px 0 0px }

How would I change this so that the new image displays correctly ?

Thanks

2

You’d need to add a width and height to the submit button to match your image and then use text-indent to hide the text that comes from the value attribute.

Or add padding top and left to create the width and height needed and that will push the text outside the button and be invisible and then hide the overflow.

Something like this perhaps:


.foxy-submit {
    padding: 26px 0 0 149px;
    width:149px;
    height:26px;
    overflow:hidden;
    margin:10px 0 0;
    background:#fff url(images/addtocart.png) no-repeat 0 0;
    float:left;
    border:2px solid #3790A6;
}
3

D’oh!

Didn’t think to play with the padding!

It’s always the simple things eh!

thanks

4

:wink:

5

Ahh, I didn’t think about that. That would work better :blush:

6

Why don’t you use input type=“image” and then resize the image to what you really want.
That should keep the “Add To Cart” text from showing as well. The image says “Add to Cart” also.

<div class="row">
    [B]<input type="image" src="addtocart.png"[/B] name="Submit" value="Add to cart" class="foxy-submit" />
</div>
7

The new one was a little bigger than the old and as a result is cut up half way via the old code settings…
Is this a BG image or an html image you are referring to. I am seeing styles for both in your css.

If it is the html img, I see that you have width:auto; set on it in the css. If you want to resize it then set your specific size there or in the html.

Give us a link to your page or the html that goes with the css and tell us which image we are to be looking at, the BG image or the html image?

8

Hi,

the html is

<div class="row">
            	<input type="submit" name="Submit" value="Add to cart" class="foxy-submit" />
            </div>

I meant the add to cart image…

.foxy-submit { padding: 5px 10px 5px 30px; margin:10px 0 0; background:#fff url(images/addtocart.png) no-repeat 7px center; float:left; border:2px solid #3790A6; }

I wasn’t sure if that was enough code you see… So I added a little bit extra to avoid confusion, which didn’t work haha