CODEWITHSUNDEEP
htmlcssimagebackgroundborder
Soggy_Piggy
Soggy_Piggy

Reputation: 3

Image with border background image

What I want is to make a border that goes around an image. Right below the border on the bottom left corner have the non repeating background when I put the class "PayPalItem" on it. So, say this is the enter image description here
I would like it to look like this
enter image description here
Here is an example of what I want in the HTML to look like and the basic CSS I have set up.

<a class="PayPalItem" href="#"><img src="../assets/test.jpg"></a>

.PayPalItem img {
    margin-bottom:26px; 
    border: thin solid #FF9933; 
    background-image: url(assets/addCart.png);
}

Upvotes: 0

Views: 87

Answers (4)

Lady Ivory
Lady Ivory

Reputation: 47

Html:

    <a class="paypalcontrol" href="#">
    <img src="http://placehold.it/300x200"/>
    <div class='paypalicon'>PayPal</div>
</a>

CSS:

.paypalcontrol .paypalicon{
    position: absolute;
    left: 0;
    margin-top:-2px;
    bottom: -1.7em;
    border: 1px solid yellow;
    padding: 5px 15px;
    border-radius: 0 0 5px 5px;
}

    .paypalcontrol {
    position: relative;
}
.paypalcontrol img {
    margin-bottom: 0; 
    border: 1px solid yellow; 
    background-image: url();
}

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49188

You can do it like this, which allows you to share the URL of the link with the PayPal button:

<a class="PayPalItem" href="#">
    <img src="http://placehold.it/200x200"/>
    <span class='paypal-button'>PayPal</span>
</a>

.PayPalItem {
    position: relative;
}
.PayPalItem img {
    margin-bottom: 0; 
    border: thin solid #FF9933; 
    background-image: url(assets/addCart.png); /* Is this meant to be the button? */
}
.PayPalItem .paypal-button {
    position: absolute;
    left: 0;
    bottom: -1.7em;
    border: 1px solid red;
    padding: 5px 15px;
    border-radius: 0 0 5px 5px;
}

http://jsfiddle.net/c5p5h/

Upvotes: 2

codewizard
codewizard

Reputation: 1627

Well your background is always going to be in the background. Note the foreground. There are a few ways to approach this.... But I would use an :after pseudo selector. This will prevent you from having repeating code in your html which is always better.

.PayPalItem {
   position:relative;
}

.PayPalItem img {
 border: thin solid #FF9933; 
}
.PayPalItem:after {
    content:" ";
    /* set your width and height to the dimensions of the add to cart image */
    width:10px;
    height:10px;
    display:block;
    position:absolute;
    top:100%;
    background-image: url(assets/addCart.png);
}

Upvotes: 0

SergioM
SergioM

Reputation: 1605

I think that your best bet is to add that link inside a div with the paypal button. Something liek this:

<div>
    <a class="PayPalItem" href="#"><img src="../assets/test.jpg"></a>
    <div>...PayPal Button...</div>
</div>

If you just want to use one link (avoid the div option above), make sure you add enough padding at the bottom for the image, set the background to no-repeat and set the position to bottom-left.

Upvotes: 1

Related Questions