CODEWITHSUNDEEP
htmlcss
Sailesh Kotha
Sailesh Kotha

Reputation: 2099

I'm unable to view the original image on the button

This url has the image that to be displayed on button

http://s28.postimg.org/7zvdncg71/buttonbg.png

CSS 

.button1{
            background-image: url(http://s28.postimg.org/7zvdncg71/buttonbg.png);           
            position: absolute; 
            height: 50px; 
            width: 210px;
            top: 60px;
            left: 500px;
        }

HTML

<button class="button1" type="button" >

When you open the link it is different, and on button the image is different. Please help me how to view the original image on button.

Upvotes: 1

Views: 68

Answers (3)

koosie
koosie

Reputation: 54

Try this css: 

.button1{
        background-image: url(http://s28.postimg.org/7zvdncg71/buttonbg.png);   
        position: absolute;
        background-size:cover;
        height: 84px; 
        width: 210px;
        top: 60px;
        left: 500px;
    }

Upvotes: 0

gsiradze
gsiradze

Reputation: 4733

at first you need quotes in url

background-image: url('http://s28.postimg.org/7zvdncg71/buttonbg.png');

second is that your image is larger than your button. try

background-size:cover;
background-repeat:no-repeat;

and height: 85px;

jsfiddle

Upvotes: 1

Karma
Karma

Reputation: 2226

Add a few more styles:

.button1 {
    background-image: url(http://s28.postimg.org/7zvdncg71/buttonbg.png);
    background-color: #3CB1DE;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    height: 50px;
    width: 210px;
    top: 60px;
    left: 500px;
}

Fiddle: http://jsfiddle.net/z21pheqr/

Upvotes: 3

Related Questions